Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>There is a difference between <em>assigning</em> values and <em>referencing</em> them.</p> <pre><code>u.a = 1; </code></pre> <p>will create a new <code>a</code> property on the object referred to by <code>u</code>. Before the assignment, <code>u.a</code> will refer to <code>TestModel.prototype.a</code>, but assigning a new value actually creates a new property on the actual object:</p> <p><img src="https://i.stack.imgur.com/MoOUP.png" alt="enter image description here"></p> <p>After the assignment:</p> <p><img src="https://i.stack.imgur.com/tcROi.png" alt="enter image description here"></p> <p>On the other hand,</p> <pre><code>u.b.push(1); </code></pre> <p>will <em>not</em> create a new property. It will reference the existing property, the array, which is <code>TestModel.prototype.b</code>.</p> <blockquote> <p>even though each instance of <code>TestModel</code> should have its own instance variables according to how I've setup the prototype</p> </blockquote> <p>All instances reference the same prototype, hence they reference the same properties the prototype has. You can easily see that because <code>TestMode.prototype === u.b</code>, <code>TestMode.prototype === u2.b</code> and <code>u.b === u2.b</code> all yield <code>true</code>. </p> <p>It would work if you assign a new value as well to <code>u.b</code> and <code>u2.b</code> as well:</p> <pre><code>u.b = []; </code></pre> <p>which is normally done in the constructor:</p> <pre><code>function TestModel() { this.b = []; } </code></pre>
 

Querying!

 
Guidance

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