JavaScript/Notes/Prototype

From Noisebridge
< JavaScript
Revision as of 20:36, 7 January 2014 by Garrett (Talk | contribs)

Jump to: navigation, search

Contents

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

function MyConstructor() {
 
}
 
alert(MyConstructor.prototype); // Look what we get for free!


function MyConstructor() {
 
}
 
var anObj = new MyConstructor; // [[Prototype]] comes from MyConstructor.prototype

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.

function MyConstructor() {
 
}
 
alert(MyConstructor.prototype.constructor);

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.


8.6.2 Internal Properties and Methods

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. Whether or not a native object can have a host object as its [[Prototype]] depends on the implementation. Every [[Prototype]] chain must have finite length (that is, starting from any object, recursively accessing the [[Prototype]] internal property must eventually lead to a null value). 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. Named accessor properties are inherited for both get access and put access.

function MyConstructor() {
 
}
 
MyConstructor.prototype = {
    toString : function() {
      return "[object MyConstructor]";
    }
};
 
alert(new MyConstructor().toString())

As shown in the above example, any function's prototype property can be replaced by any user-defined object.

function MyConstructor(name) {
}
 
MyConstructor.prototype = {
    toString : function() {
      return "[object MyConstructor]";
    }
};
 
function MySubclass(name) { }
MySubclass.prototype = new MyConstructor;

Subclassing

Why Subclass?

// 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);
}

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

Shadowing

(whiteboard diagram)

Object.create

// Extend prototype.
MySubclass.prototype = Object.create(MyConstructor.prototype);
 
MySubclass.prototype.valueOf = function() {
  return this.name;
};

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

Personal tools