Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The problem is that you can't easily create a prototype object for <code>B</code> since invoking the constructor of <code>A</code> can't be done. This is due to the parameters for the constructor being unknown before <code>new B</code> is executed. You need a dummy constructor function to construct a prototype for <code>B</code> that links to <code>A</code>'s prototype.</p> <pre><code>B.prototype = (function(parent){ function protoCreator(){}; protoCreator.prototype = parent.prototype; // Construct an object linking to A.prototype without calling constructor of A return new protoCreator(); })(A); </code></pre> <p>Once you've got the prototype object for <code>B</code> set up, you need to ensure to call the constructor of <code>A</code> in the constructor of <code>B</code>.</p> <pre><code>function B(x, y) { // Replace arguments by an array with A's arguments in case A and B differ in parameters A.apply(this, arguments); } </code></pre> <p>You should now be able to instantiate <code>B</code> by calling <code>new B(x, y)</code>.</p> <p>For a complete same including parameter validation in <code>A</code> see <a href="http://jsfiddle.net/bKUF6/" rel="nofollow">a jsFiddle</a>.</p> <p>In your original code you are setting <code>B.prototype.constructor = B</code>. I'm not getting why you are doing this. The <code>constructor</code> property does not influence the inheritance hierarchy for which the <code>prototype</code> property is responsible. If you want to have the named constructor contained in the <code>constructor</code> property you'd need to extend the code from above a little:</p> <pre><code>// Create child's prototype – Without calling A B.prototype = (function(parent, child){ function protoCreator(){ this.constructor = child.prototype.constructor }; protoCreator.prototype = parent.prototype; return new protoCreator(); })(A, B); </code></pre> <p>Using the first definition of <code>B.prototype</code> you'd get the following results:</p> <pre><code>var b = new B(4, 6); b.constructor // A console.info(b instanceof A); // true console.info(b instanceof B); // true </code></pre> <p>With the <a href="http://jsfiddle.net/bKUF6/1/" rel="nofollow">extended version</a>, you'll get:</p> <pre><code>var b = new B(4, 6); b.constructor // B console.info(b instanceof A); // true console.info(b instanceof B); // true </code></pre> <p>The cause for the different output is that <code>instanceof</code> follows up the whole prototype chain of <code>b</code> and tries to find a matching prototype object for <code>A.prototype</code> or <code>B.prototype</code> (in the other call). The <code>b.constructor</code> prototype does refers to the function that was used to define the instances prototype. In case you wonder why it does not point to <code>protoCreator</code> this is because its prototype was overwritten with <code>A.prototype</code> during the creation of <code>B.prototype</code>. The extended definition as show in <a href="http://jsfiddle.net/bKUF6/1/" rel="nofollow">the updated example</a> fixes this <code>constructor</code> property to point to a more appropriate (because probably more expected) function.</p> <p>For daily use, I'd recommend to discard the idea of using the <code>constructor</code> property of instances entirely. Instead do use <code>instanceof</code> since its results are more predictable/expected.</p>
    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. 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