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. Furthermore, a prototype may have a non-null implicit reference to its prototype, and so on; this is called the prototype chain. When a reference is made to a property in an object, that reference is to the property of that name in the first object in the prototype chain that contains a property of that name. In other words, first the object mentioned directly is examined for such a property; if that object contains the named property, that is the property to which the reference refers; if that object does not contain the named property, the prototype for that object is examined next; and so on. (§4.2.1 Objects).

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.