JavaScript/Notes/Prototype: Difference between revisions

From Noisebridge
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
== 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.
</blockquote>


=== Constructors ===  
== Constructors ==
<source lang="javascript">
<source lang="javascript">
function MyConstructor() {
function MyConstructor() {
Line 13: Line 9:
</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 “prototype” property.
</blockquote>




Line 24: Line 24:


<h4>Shared Properties</h4>
<h4>Shared Properties</h4>
Every user-defined function has a prototype property, provided by the implementation. The prototype property that is provided by the implementation has a <code>constructor</code> property that points back to the constructor function.
Every user-defined function is given a prototype property by the implementation. This property has a <code>constructor</code> property that points back to the constructor function.


<source lang="javascript">
<source lang="javascript">
Line 53: Line 53:


<p>
<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>
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>
</blockquote>



Revision as of 20:45, 7 January 2014

Constructors

<source lang="javascript"> function MyConstructor() {

}

alert(MyConstructor.prototype); // Look what we get for free! </source>

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.


<source lang="javascript"> function MyConstructor() {

}

var anObj = new MyConstructor; // Prototype comes from MyConstructor.prototype </source>

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.

<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.