Copying attributes in Javascript

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 e开发者_运维技巧xample):

/*
* 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!

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.

You seem to misunderstand the use of prototype. Prototyping is JavaScript's way of dealing with inheritance. The extend function is terminology loaned from languages like C++ and Java and is not native to JavaScript.

Here's a guide on prototype: http://mckoss.com/jscript/object.htm

I have several years experience writing JavaScript and I'd recommend not using prototyping at all. JavaScript has other ways of dealing with data modeling that I find more elegant. It's still useful to understand how prototyping works though because it deepens your understanding of Objects.