JavaScript/Notes/Prototype

Prototype Chain

Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property.

Constructors

<source lang="javascript"> function MyConstructor() {

}

alert(MyConstructor.prototype); // Look what we get for free! </source>

<source lang="javascript"> function MyConstructor() {

}

var anObj = new MyConstructor; // Prototype comes from MyConstructor.prototype </source>

Shared Properties

Every user-defined function has a prototype property, provided by the implementation. The prototype property that is provided by the implementation has a constructor property that points back to the constructor function.

<source lang="javascript"> function MyConstructor() {

}

alert(MyConstructor.prototype.constructor); </source>

<source lang="javascript"> function MyConstructor(id) {

 this.id = id;

}

MyConstructor.prototype.method = function() {

 return this.id;

};

alert(new MyConstructor("h").method()); </source>

The prototype property is used for prototype inheritance of shared properties. When any function is used in a new Expression, a new object is created and given a link to the constructor function's `prototype` property.

Internal Prototype Properties

All objects have an internal property called [[Prototype]]. The value of this property is either null or an object and is used for implementing inheritance. Named data properties of the [[Prototype]] object are inherited (are visible as properties of the child object) for the purposes of get access, but not for put access. (§ 8.6.2)

<source lang="javascript"> function MyConstructor() {

}

MyConstructor.prototype = {

   toString : function() {
     return "[object MyConstructor]";
   }

};

alert(new MyConstructor().toString()) </source> As shown in the above example, any function's prototype property can be replaced by any user-defined object.

Subclassing

Why Subclass? <source lang="javascript"> function MyConstructor(name) { }

MyConstructor.prototype = {

   toString : function() {
     return "[object MyConstructor]";
   }

};

function MySubclass(name) { } MySubclass.prototype = new MyConstructor; </source>

<source lang="javascript"> // Base class. function MyConstructor(name) {

 this.name = name;

}

// Prototype. MyConstructor.prototype = {

   toString : function() {
     return "[object MyConstructor]";
   }

};

// Subclass. function MySubclass(name) { // Call super constructor.

 MyConstructor.call(this, name);

} </source>

JSBin Example: http://jsbin.com/upuQAtAV/1/edit

Shadowing

(whiteboard diagram)

Object.create

<source lang="javascript">// Extend prototype. MySubclass.prototype = Object.create(MyConstructor.prototype);

MySubclass.prototype.valueOf = function() {

 return this.name;

}; </source>

See also: Object.create() | MDN A more complex Prototype Chain inheritance explanation, example, and diagram.