1. Technology

Object Oriented JavaScript

17. Copying Objects


Top Related Searches
  • shallow copy
  • data types
  • nbsp
  • When you create a new object based on an existing one you would usually create new fields to hold the properties of the new object and would share the methods of the parent object. The way that objects are normally copied conceals the fact that the usual way of creating a new object from an existing one doesn't actually copy the properties and methods of the parent object you are copying.

    What in fact does happen is that the new object is set up with references to all of the methods and many of the properties of the parent object rather than creating its own actual copies of them. It is only the simpler properties using the most basic of data types (such as boolean, number, and string) that are physically copied when you copy an object the normal way.

    In the usual situation where you want to share methods and create your own new properties this isn't going to make any difference since those fields passed by reference are either going to be replaced by new fields in the new object or will be intended to call the same method as it references anyway. There are times though where this isn't what we want and where we actually do want to make a proper complete copy of an object.

    To distinguish between the way an object is normally copied (with most of the fields being simply references to the same processing as the parent objects uses) and the sort of copy where everything is completely copied we sometimes refer to the simpler copy the references way as a shallow copy and the more involved making a physical copy of everything was as a deep copy. That allows us to simplify the question of how to properly create a copy of all of the properties and methods in our new object as copies of the corresponding properties and methods in the parent object to - "How do we deep copy?".

    One way to do this is to add our own deepCopy processing that we can call when we want to be able to copy fully rather than just by reference.

    function deepCopy(p,c) {
    var c = c||{};
    for (var i in p) {
      if (typeof p[i] === 'object') {
        c[i] = (p[i].constructor === Array)?[]:{};
      } else c[i] = p[i];}
    return c;

    We can then create a deep copy of an object like this:

    var child = deepCopy(parent);

    Note that as any JavaScript objects other than primitives are copied by reference (a shallow copy) rather than a true copy being made, any deep copy by its nature is going to dig down to the lowest level primitives that the object contains and will copy those from the one object to the other. Depending on just exactly how the object has been structured the data types of any intermediate level objects may not be recreated in the new object by this example deepcopy function. The simplest solution in such a situation is to create a custom deepcopy function that has specific knowledge of the intermediate level object structures.

    All the Object Oriented JavaScript Tutorials

    1. What is Object Oriented JavaScript?
    2. The Benefits of OO JavaScript
    3. JavaScript's Built in Objects
    4. Extending Built In Objects
    5. Creating Objects from Existing Objects
    6. Creating New Objects Without Copying Existing Ones
    7. Dot Notation and "this"
    8. prototype
    9. Inheritance and "constructor"
    10. Associative Array Notation
    11. Create Method if Doesn't Exist
    12. "self" and Multiple Objects
    13. Defining Objects with JSON
    14. Namespaces
    15. Lazy Definition
    16. Extending Methods
    17. Copying Objects
    18. Private Properties and Privileged Methods
    19. Public Access to Private Methods
    20. Chaining Methods
    21. Singletons
    Related Video
    Final Cut Pro Dissolves and Other Transitions
    1. About.com
    2. Technology
    3. JavaScript
    4. Javascript Tutorials
    5. Object Oriented JavaScript
    6. Copying Objects

    ©2014 About.com. All rights reserved.