JavaScript/Notes/Prototype

From Noisebridge
< JavaScript(Difference between revisions)
Jump to: navigation, search
(Prototype Chain)
Line 1: Line 1:
  
== Constructors ==
+
== 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 <code>prototype</code> property.
 +
</blockquote>
 +
 
 +
 
 +
=== Constructors ===
 
<source lang="javascript">
 
<source lang="javascript">
 
function MyConstructor() {
 
function MyConstructor() {
Line 9: Line 15:
 
</source>
 
</source>
  
== 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 <code>prototype</code> property.
 
</blockquote>
 
  
  

Revision as of 20:47, 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 is given a prototype property by the implementation. This property 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