Question

Javascript – The Definitive Guide (6ed) shows the following code:

Originally we have this function

/*
* Copy the enumerable properties of p to o, and return o.
* If o and p have a property by the same name, o's property is overwritten.
* This function does not handle getters and setters or copy attributes.
*/
 function extend(o, p) {
       for(prop in p) { // For all props in p.
           o[prop] = p[prop]; // Add the property to o.
      }
      return o;
}

Then the author decided to rewrite it and extend the copy ability (able to copy accessor properties, for example):

/*
* Add a nonenumerable extend() method to Object.prototype.
* This method extends the object on which it is called by copying properties
* from the object passed as its argument. All property attributes are
* copied, not just the property value. All own properties (even non-
* enumerable ones) of the argument object are copied unless a property
* with the same name already exists in the target object.
*/
Object.defineProperty(Object.prototype,
    "extend", // Define Object.prototype.extend
    {
        writable: true,
        enumerable: false, // Make it nonenumerable
        configurable: true,
        value: function(o) { // Its value is this function
           // Get all own props, even nonenumerable ones
           var names = Object.getOwnPropertyNames(o);
           // Loop through them
           for(var i = 0; i < names.length; i++) {
            // Skip props already in this object
            if (names[i] in this) continue;
            // Get property description from o
            var desc = Object.getOwnPropertyDescriptor(o,names[i]);
            // Use it to create property on this
            Object.defineProperty(this, names[i], desc);
            }
    }
});

I don’t understand why we are extending Object.prototype, and now how do we use this to copy all the attributes in Object y to Object x? How do I use Object.prototype.extend ?

I decided to test if I can do something quicker. I don’t understand why the following custom code doesn’t work.

function extend(o){
    var p = new Object();
    for( prop in o)
        Object.defineProperty(p,prop,Object.getOwnPropertyDescriptor(o,prop));
    return p;

}


 // Let's perform a simple test

var o = {};

Object.defineProperty(o, "x", { value : 1,
   writable: true,
   enumerable: false,
   configurable: true});

o.x; // => 1
Object.keys(o) // => []

var k = new Object(extend(o));  // Good, k.x => 1

// More test

Object.defineProperty(o, "x", { writable: false });
Object.defineProperty(o, "x", { value: 2 });
Object.defineProperty(o, "x", { get: function() { return 0; } });
o.x // => 0 

// Perform the creation again

var k = new Object(extend(o));   // bad. k.x is 1, not 0

 // so the getter property didn't copy to k !!!

Sorry I am pretty new to Javascript. Thanks for the help in advance. All these questions are related to the transformation / rewrite of the function “extend”

---

I edited the my test code. Sorry!

Answer 1

The purpose of defining this in the prototype is so that every Object can call it as a member function, like this:

yourobject.extend(anotherObject);

Most coders find that more elegant than having to pass both objects as parameters, like this:

extend(yourObject, anotherObject);

Modifying prototypes is a great way to add useful “methods” to objects.

side note: I would not recommend using the author’s extend code. It doesn’t properly check hasOwnProperty.