JavaScript/Notes/Prototype

From Noisebridge
< JavaScript(Difference between revisions)
Jump to: navigation, search
Line 1: Line 1:
 
== Prototype Chain ==  
 
== Prototype Chain ==  
  
<blockquote>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. ([http://ecma-international.org/ecma-262/5.1/#sec-4.2.1 &sect;4.2.1 Objects]).
+
<blockquote>Every object created by a constructor has an implicit reference (called the object’s prototype) to the value of its constructor’s “prototype” property.  
 
</blockquote>
 
</blockquote>
  

Revision as of 20:43, 7 January 2014

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.

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);
function MyConstructor(id) {
  this.id = id;
}
 
MyConstructor.prototype.method = function() {
  return this.id;
};
 
alert(new MyConstructor("h").method());

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)

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.


Subclassing

Why Subclass?

function MyConstructor(name) {
}
 
MyConstructor.prototype = {
    toString : function() {
      return "[object MyConstructor]";
    }
};
 
function MySubclass(name) { }
MySubclass.prototype = new MyConstructor;
// 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