Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <ol> <li><p>Setting <code>Ninja.prototype = Person.prototype;</code> is saying that <em>all Ninjas are Persons, and all Persons are Ninjas</em>, since it simply makes the two prototypes point to the same thing. So changing <code>Ninja.prototype</code> will change <code>Person.prototype</code> and vice versa.</p></li> <li><p>Setting <code>Ninja.prototype = new Person();</code> is saying that <em>all Ninjas start off being a regular person</em>, but <code>Ninja.prototype</code> can be modified without changing the definition of <code>Person</code>. The key here is the <code>new</code> keyword, which creates a unique <em>instance</em> of <code>Person</code>, and is therefore free to be modified without affecting anything else.</p></li> </ol> <hr> <h2>Example of <code>Ninja.prototype = Person.prototype</code></h2> <p>Define <code>Ninja</code>'s prototype to be the same as Person's:</p> <pre><code>function Person() {} Person.prototype.dance = function () {}; // A Person can dance function Ninja() Ninja.prototype = Person.prototype; // Now a Ninja can dance too! </code></pre> <p>An <em>instance</em> of <code>Ninja</code> has the abilities of <code>Person</code>:</p> <pre><code>var ninja = new Ninja(); ninja.dance(); </code></pre> <p><strong>But</strong>, modifications to the definition of <code>Ninja</code> also affect instances of <code>Person</code>:</p> <pre><code>Ninja.prototype.kill = function () {}; // Oh no! Now a Person can kill too! var bob = new Person(); bob.kill(); // Not what we wanted... </code></pre> <hr> <h2>Example of <code>Ninja.prototype = new Person()</code></h2> <p>Define <code>Person</code> in the same way as before:</p> <pre><code>function Person(){}; Person.prototype.dance = function () {}; // A Person can dance </code></pre> <p>Now I'll break <code>Ninja.prototype = new Person()</code> into two steps. First, create a new <code>Person</code>, called <code>defaultNinja</code>:</p> <pre><code>var defaultNinja = new Person(); // Despite the name, it's just a regular Person </code></pre> <p>Then define all <code>Ninja</code>s to be like the default:</p> <pre><code>function Ninja(){}; Ninja.prototype = defaultNinja; // Really the same as Ninja.prototype = new Person(); </code></pre> <p>This time if we change what <code>Ninja</code>s can do:</p> <pre><code>Ninja.prototype.kill = function () {}; // OR, defaultNinja.kill = function () {}; </code></pre> <p>Instances of <code>Person</code> aren't affected:</p> <pre><code>ninja.kill(); // Now the ninja can kill var bob = new Person(); bob.kill(); // ERROR, because Person.prototype doesn't have kill(), // only defaultNinja does </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

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