JavaScript/Notes/Prototype

From Noisebridge
< JavaScript(Difference between revisions)
Jump to: navigation, search
(Created page with "== 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” p...")
 
 
(37 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 +
The prototype chain is used by JavaScript engines for reading property resolution.
 +
 +
User-defined [[JavaScript/Notes/Function#Functions_Double_as_Constructor|functions]] can be designed for use as constructors to create new objects which then have, on their prototype chain, that constructor function's `prototype`. Review from [[JavaScript/Notes/Function#Functions_Double_as_Constructor|Functions]]:
 +
{{Function Constructor}}
 +
 +
Define constructor functions how assigning `prototype` property to the constructor creates the prototype chain, for shared properties on the constructor function's object instances.
 +
 +
[http://www.w3.org/TR/WebIDL/ WebIDL] defines the prototype chain to describe native inheritance of host object interfaces.
 +
 
== Prototype Chain ==  
 
== 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. ([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 <code>prototype</code> property.  
 +
</blockquote>
 +
 
 +
 
 +
=== Constructors ===
 +
Functions are used for constructors, to instantiate new objects.
 +
 
 +
<source lang="javascript">
 +
function MyConstructor() {
 +
 
 +
}
 +
 
 +
alert(MyConstructor.prototype); // Look what we get for free!
 +
</source>
 +
 
 +
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 (The <code>new</code> Operator [http://ecma-international.org/ecma-262/5.1/#sec-11.2.2 &sect; 11.2.2]).
 +
 
 +
<source lang="javascript">
 +
function MyConstructor() {
 +
 
 +
}
 +
 
 +
var anObj = new MyConstructor; // [[Prototype]] comes from MyConstructor.prototype
 +
</source>
 +
 
 +
<h4>Shared Properties</h4>
 +
Every user-defined '''''function''''' is given a <code>prototype</code> property by the implementation. This property has a <code>constructor</code> property that points back to the constructor function.
 +
 
 +
<source lang="javascript">
 +
function MyConstructor() {
 +
 
 +
}
 +
 
 +
alert(MyConstructor.prototype.constructor);
 +
</source>
 +
 
 +
The constructor's <code>prototype</code> property can be modified, and this allows for shared properties for each new instance created by that constructor.
 +
<source lang="javascript">
 +
function MyConstructor(id) {
 +
  this.id = id;
 +
}
 +
 
 +
MyConstructor.prototype.method = function() {
 +
  return this.id;
 +
};
 +
 
 +
alert(new MyConstructor("h").method());
 +
</source>
 +
 
 +
 
 +
<blockquote>
 +
<h3>Internal Prototype Properties</h3>
 +
 
 +
<p>
 +
All '''''objects''''' have an internal property called <nowiki>[[Prototype]]</nowiki>. The value of this property is either null or an object and is used for implementing inheritance. Named data properties of the <nowiki>[[Prototype]]</nowiki> object are inherited (are visible as properties of the child object) for the purposes of get access, but not for put access. ([http://ecma-international.org/ecma-262/5.1/#sec-8.6.2 &sect; 8.6.2])</p>
 +
</blockquote>
 +
 
 +
<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: [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create Object.create() | MDN]
 +
A more complex [http://dhtmlkitchen.com/learn/js/enumeration/prototype-chain.html Prototype Chain] inheritance explanation, example, and diagram.

Latest revision as of 12:13, 12 August 2014

The prototype chain is used by JavaScript engines for reading property resolution.

User-defined functions can be designed for use as constructors to create new objects which then have, on their prototype chain, that constructor function's `prototype`. Review from Functions:

// Colorized is a constructor.
function Colorized(name, favoriteColor) {
  this.name = name;
  this.favoriteColor = favoriteColor;
}
 
// c is an instance of Colorized.
var c = new Colorized("Mary", "red");
alert(c.toString());

A toString method is available on every native object. This is because toString is defined on Object.prototype and Object.prototype is at the base the prototype chain.

Define constructor functions how assigning `prototype` property to the constructor creates the prototype chain, for shared properties on the constructor function's object instances.

WebIDL defines the prototype chain to describe native inheritance of host object interfaces.

Contents

[edit] 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.


[edit] Constructors

Functions are used for constructors, to instantiate new objects.

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

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 (The new Operator § 11.2.2).

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

The constructor's prototype property can be modified, and this allows for shared properties for each new instance created by that constructor.

function MyConstructor(id) {
  this.id = id;
}
 
MyConstructor.prototype.method = function() {
  return this.id;
};
 
alert(new MyConstructor("h").method());


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.

[edit] 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

[edit] Shadowing

(whiteboard diagram)

[edit] 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