StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>There are actually two different kind of "prototype" in JavaScript:</p> <ol> <li>One is the "hidden" link every object has (let's use <code>[[Prototype]]</code> to represent this hidden link). object literals by default have their hidden links pointing to <code>Object.prototype</code>, function objects have their hidden link pointing to <code>Function.prototype</code>, and arrays have theirs pointing to <code>Array.prototype</code>. These <strong><em>hidden prototype links</em></strong> are not related to properties with name "prototype". You can't change these hidden links by adding or modifying <code>o.prototype</code>.</li> <li>Another one is that all function objects automatically have a special property named "<code>prototype</code>". This is mainly for the usage of constructor invocation pattern.</li> </ol> <p><code>[[Prototype]]</code> is used for searching properties (like the parent in classical hierarchy), whenever a property cannot be found in an object, its <code>[[Prototype]]</code> is searched instead. One usage scenario: say you'd like to add a property to all objects, you could simply add it to <code>Object.prototype</code> which would automatically apply to all objects since all objects somehow have <code>Object.prototype</code> as their <code>[[Prototype]]</code> chain root.</p> <p>Lets get back to function objects' "<code>prototype</code>" property. It is only useful when used with operator <code>new</code>. Take the following code snippet as an example:</p> <pre><code>function F() {} // function declaration // F now has a property named "prototype" var f = new F(); // use "new" operator to create a new function object based on F </code></pre> <p>What <code>new F()</code> does above is to first create a new function object, set the <code>[[Prototype]]</code> (hidden link) of this newly created function object to be <code>F.prototype</code>, and then return the new function object. This is probably what you already understand that works for function objects.</p> <p>Remember that I said we can't change objects's <code>[[Prototype]]</code>? Well, at least not directly. Crockford's <code>Object.create</code> function does just that, by utilizing the fact that operator <code>new</code> could help set <code>[[Prototype]]</code> for us. So by using <code>Object.create</code>, you get to deliberately indicate where your new object's hidden link should point to. (somewhat feel like indicating who is your parent class)</p> <p>In your example, <code>conf</code> is an object literal and <code>conf.prototype</code> isn't really useful. Here's another version utilizing classical style:</p> <pre><code>function ConfBase() {} ConfBase.prototype.d = 16; var conf = new ConfBase(); conf.a = 2; conf.b = 4; document.writeln(conf.a); document.writeln(conf.b); document.writeln(conf.d); </code></pre> <p>Compared to the answer of @CMS, I do prefer using <code>Object.create</code>. But essentially the 2 styles are using the same underlying mechanism, just that <code>Object.create</code> helps tidy it up.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload