Editing JavaScript/Notes/Prototype

Jump to navigation Jump to search
Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you log in or create an account, your edits will be attributed to your username, along with other benefits.

The edit can be undone. Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.

Latest revision Your text
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 ==  


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


 
=== Constructors ===  
=== 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">
<source lang="javascript">
function MyConstructor() {
function MyConstructor() {
Line 33: Line 10:
}
}


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


<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 <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">
<source lang="javascript">
Line 47: Line 23:
</source>
</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.
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.
<source lang="javascript">
function MyConstructor(id) {
  this.id = id;
}
 
MyConstructor.prototype.method = function() {
  return this.id;
};
 
alert(new MyConstructor("h").method());
</source>




<blockquote>
<blockquote>
<h3>Internal Prototype Properties</h3>
<h3>8.6.2 Internal Properties and Methods</h3>


<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. Whether or not a native object can have a host object as its <nowiki>[[Prototype]]</nowiki> depends on the implementation. Every <nowiki>[[Prototype]]</nowiki> chain must have finite length (that is, starting from any object, recursively accessing the <nowiki>[[Prototype]]</nowiki> internal property must eventually lead to a null value). 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. Named accessor properties are inherited for both get access and put access.</p>
</blockquote>
</blockquote>


Line 81: Line 46:
alert(new MyConstructor().toString())
alert(new MyConstructor().toString())
</source>
</source>
As shown in the above example, any function's prototype property can be replaced by any user-defined object.
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">
<source lang="javascript">
function MyConstructor(name) {
function MyConstructor(name) {
Line 99: Line 62:
</source>
</source>


== Subclassing ==
<source lang="javascript">
<source lang="javascript">
// Base class.
// Base class.
Line 117: Line 81:
   MyConstructor.call(this, name);
   MyConstructor.call(this, name);
}
}
</source>
JSBin Example: http://jsbin.com/upuQAtAV/1/edit
== Shadowing ==
(whiteboard diagram)


== Object.create ==
// Extend prototype.
<source lang="javascript">// Extend prototype.
MySubclass.prototype = Object.create(MyConstructor.prototype);
MySubclass.prototype = Object.create(MyConstructor.prototype);


Please note that all contributions to Noisebridge are considered to be released under the Creative Commons Attribution-NonCommercial-ShareAlike (see Noisebridge:Copyrights for details). If you do not want your writing to be edited mercilessly and redistributed at will, then do not submit it here.
You are also promising us that you wrote this yourself, or copied it from a public domain or similar free resource. Do not submit copyrighted work without permission!

To protect the wiki against automated edit spam, we kindly ask you to solve the following CAPTCHA:

Cancel Editing help (opens in new window)

Template used on this page: