Javascript prototype for object

It's not like a property .prototype

. ... Despite the name, the function property is .prototype

not the prototype of the objects you are used to working with. This is one of the hardest things to understand JavaScript , so it's not just you.

The key to understanding JavaScript's prototype system is that an operator new

creates two objects, not one . I'll cover this in terms of four variables:

Note that these are invalid JavaScript names (in fact, they are not valid names in most programming languages). This all happens behind the scenes, and most implementations don't use those names either. I am doing this to make it clear that you cannot see these objects normally.

When you use an operator new

, JavaScript takes roughly the following steps.

• Create object [[newPrototype]].
• Install [[newPrototype]]. [[myPrototype]] to [[Constructor]]. prototype
• Create object [[newObject]].
• Install [[newObject]]. [[myPrototype]] to [[newPrototype]]
• Install [[newObject]]. [[myPrototype]]. constructor in [[Constructor]]
• Calling [[Constructor]] with [[newObject]] as "this".

Please note that [[newObject]]. [[myPrototype]] is not ideal for [[newObject]] or [[Constructor]] prototype. To do this, we need a third object in between: it carries the information you want to inherit (via [[newPrototype]]. [[MyPrototype]]), but also contains information specific to the object being created (in the [newObject]]. Constructor) ...

So we get what the function is for .prototype

. This is not the [[myPrototype]] function, and it is not [[myPrototype]] for objects you create with new

. They are actually two levels in the prototype chain, not just one.

Hopefully this explanation helps you understand what the function is for .prototype

. This is not easy stuff and not every explanation clicks with everyone. This is part of why we have so many explanations.

When you first create an object, you can prototype it directly withObject.create()

. This feature works with IE9 and up (plus all other modern browsers), and can be poly-lized if you need to work with older browsers. To see this prototype later, you are usingObject.getPrototypeOf()

which also has decent browser support (although IE only supports it in version 9 and up). Using just these two functions, you can create your objects like this:

var x = {a:"xa",b:"xb",c:"xc"};
var e = Object.create(x);
x.a = "ea";
x.b = "eb";
console.log(Object.getPrototypeOf(Object));
console.log(Object.getPrototypeOf(e));
console.log(x.c);
console.log(e.c);//this is undefined , why?  i am expecting it to be "xc"
console.log(e.a);
console.log(e.b);
console.log(Object.getPrototypeOf(e).a);
console.log(Object.getPrototypeOf(e).b);    

      

        
        
        
      

    

Once the object has been created, there is no standard way to reset its prototype yet . ECMAScript 6 defines one (the Object.setPrototypeOf () function), but so far only Chrome and Firefox support it: IE and Safari don't. However, if everything is ok, you can do the following:

var x = {a:"xa",b:"xb",c:"xc"};
var e = {a:"ea",b:"eb"};
console.log(Object.getPrototypeOf(object));
console.log(Object.getPrototypeOf(e));
Object.setPrototypeOf(e, x);
console.log(Object.getPrototypeOf(e));
console.log(x.c);
console.log(e.c);
console.log(e.a);
console.log(e.b);
console.log(Object.getPrototypeOf(e).a);
console.log(Object.getPrototypeOf(e).b);

      

        
        
        
      

    

There is a non-standard way to reset an existing object prototype and it even enjoys good browser support at this time . To do this, you set a property .__proto__

to any standard object. You can use it like this:

var x = {a:"xa",b:"xb",c:"xc"};
var e = {a:"ea",b:"eb"};
console.log(object.__proto__);
console.log(e.__proto__);
e.__proto__ = x;
console.log(e.__proto__);
console.log(x.c);
console.log(e.c);
console.log(e.a);
console.log(e.b);
console.log(e.__proto__.a);
console.log(e.__proto__.b);

      

        
        
        
      

    

Now, to your last question, why Object.prototype

is {} and not undefined? Because the constructor function Object

has a property .prototype

that becomes the default prototype of all objects created through it. The specs call this object [[ObjectPrototype]], and that's where type functions live .hasOwnProperty()

.