JavaScript/Notes/Prototype: Difference between revisions
No edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
== 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 | 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 § 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 § 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>
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.