StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The <code>prototype</code> is just another object to which an object has an implicit reference.</p> <p>When you do:</p> <pre><code>var obj = Object.create( some_object ); </code></pre> <p>...you're saying that you want <code>obj</code> to try to fetch properties from <code>some_object</code>, when they don't exist on <code>obj</code>.</p> <p>As such, your second example would be closer to the way you'd use it. Every object that is created using <code>Object.create(Dog)</code> will have in its <em>prototype chain</em>, that <code>Dog</code> object. So if you make a change to <code>Dog</code>, the change will be reflected across all the objects that have <code>Dog</code> in the chain.</p> <p>If the main object has the same property as exists on the prototype object, that property is <em>shadowing</em> that property of the prototype. An example of that would be the <code>null</code> values you set on properties of <code>Dog</code>.</p> <p>If you do:</p> <pre><code>var lab = Object.create(Dog); lab.color = 'golden'; </code></pre> <p>...you're now shadowing the <code>color</code> property on <code>Dog</code>, so you'll no longer get <code>null</code>. You're <em>not</em> changing <code>Dog</code> in any way, so if I create another object:</p> <pre><code>var colorless_dog = Object.create(Dog); </code></pre> <p>...this one will still get the <code>null</code> value from the prototype chain when accessing the <code>color</code> property.</p> <pre><code>colorless_dog.color; // null </code></pre> <p>...until you shadow it:</p> <pre><code>colorless_dog.color = 'blue'; colorless_dog.color; // 'blue' </code></pre> <p>So given your example:</p> <pre><code>var lab = Object.create(Dog); lab.color = 'golden'; lab.sheds = true; </code></pre> <p>...it looks something like this:</p> <pre><code> // labrador // Dog lab.color---> color:'golden' color:null lab.sheds---> sheds:true sheds:null lab.fetch()--------------------------> fetch: function() { alert( this.color ); // 'golden' // "this" is a reference to the // "lab" object, instead of "Dog" } </code></pre>

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