Prototypical inheritance and constructors

Question

I couldn't find anything matching my exact question so sorry if this is a duplicate.

Given the code:

var Foo = function () {
};

Foo.prototype.log = function (message) {
    console.log(message);
};

var Bar = function () {
};

Bar.prototype = Object.create(Foo.prototype);

I can inherit the log(message) function of Foo within Bar and call the following code without issue.

var bar = new Bar();

bar.log("this works");

If I then move the assignment of the prototype to the constructor like follows:

var Foo = function () {
};

Foo.prototype.log = function (message) {
    console.log(message);
};

var Bar = function () {
    Bar.prototype = Object.create(Foo.prototype);
};

The call to log(message) will fail

TypeError: bar.log is not a function

Now I'm probably missing something obvious but why is this the case? How would I lazily inherit properties?

The use case I am imagining is inheriting objects from an asynchronously loaded JavaScript file, something like a google.maps.OverlayView whilst being able to already have the inherited object present in the page.

You cannot setup inheritance after having constructed instances already. Wait with that until the file is loaded. — Bergi, Feb 25 '15 at 12:06
possible duplicate of [this.constructor.prototype — can't wholly overwrite, but can write individual props?](http://stackoverflow.com/q/21296559/1048572). It's not exactly your use case, but will answer the question why it doesn't work. — Bergi, Feb 25 '15 at 12:10

KooiInc · Answer 1 · 2015-02-25T15:34:50.753

When you assign the prototype within the constructor, it will be assigned after first instantiation. In the code snippet (or this jsfiddle with a few more examples and inheritance check) that situation is demonstrated in barfoo1 and barfoo2. A solution would be to copy Foo.prototype within the Bar constructor. Another solution is to return an instance on assigning the prototype within the constructor. Both are demonstrated in the FooBar and FooFoo constructor in the snippet respectively.

Furthermore you can assign the prototype just using Xyz.prototype = Abc.prototype (no need for Object.create here), or use Xyz.prototype = new Abc.

var Foo = function () {};

Foo.prototype.log = function (msg) {
  log(msg);
}

var Bar = function () {
    Bar.prototype = Object.create(Foo.prototype);
};

var FooBar = function () {
  if (!FooBar.prototype.log) {
     for (var l in Foo.prototype) {
       FooBar.prototype[l] = Foo.prototype[l];
     }
  }
}

var FooFoo = function () {
  if (!FooFoo.prototype.log) {
       FooFoo.prototype = new Foo;
       return new FooFoo;
    }
}

var BarFoo = function () {
  if (!BarFoo.prototype.log) {
       BarFoo.prototype = Object.create(Foo.prototype);
  }
}

var bar = new Bar;
var foobar = new FooBar;
var barfoo1 = new BarFoo; 
var barfoo2 = new BarFoo;
var doublefoo = new FooFoo;

try { bar.log('hello!'); }
catch(e) {log('bar.log failed =&gt; ', e.message);}

try { barfoo1.log('barfoo1 hello!'); }
catch(e) {log('barfoo1.log failed =&gt; ', e.message);}

try { barfoo2.log('barfoo2 hello!'); }
catch(e) {log('barfoo2.log failed =&gt; ', e.message);}

foobar.log('foobar just works (Foo.prototype copied)');
doublefoo.log('doublefoo just works too (instantiation on assigning Foo.prototype)');

function log() {
  document.querySelector('#result')
    .innerHTML += '<p>'+ [].slice.call(arguments).join('') +'</p>';
}

<div id="result"></div>

`Bar.prototype = Foo.prototype;` - wait what? That's not inheritance! (and makes as little sense as the original code *in* the constructor) — Bergi, Feb 25 '15 at 12:12
@KooiInc: I think [this](http://stackoverflow.com/q/11088365/1048572) or [that](http://stackoverflow.com/q/17392857/1048572) question elaborates quite well. — Bergi, Feb 25 '15 at 16:03
@Bergi: I don't read it's *not inheritance* in this and that. I only read it may be better to use `Object.create` for inheritance. Of which I am not sure (see also the jsfiddle within the answer). — KooiInc, Feb 25 '15 at 16:42
@KooiInc: "*Then they both refer to the same object, so you might as well have everything in `Bar`, if you add something to `Foo.prototype`, it will be added to `Bar.prototype` as well. You can easily test it by adding something to `Foo.prototype` after the assignment. For example, in your case you can see that `Bar.prototype.constructor` is actually `Foo`*" (paraphrased class names). They are no distinct classes inheriting from each other any more when they have the same prototype object, but they are the same class. — Bergi, Feb 25 '15 at 16:46

score 0 · Answer 2 · answered Feb 25 '15 at 12:03

0

James if jQuery is possible in your code you could attempt something like this -

var Bar = function() {};
$.ajax({
  url: "http://maps.google.com/api/scriptfile.js",
  dataType: "script",
  success: function(script, status) {
             Bar.prototype = Object.create(Foo.prototype);
           }
});

Hope this helps!

answered Feb 25 '15 at 12:03

Siva Senthil

610
6
22

please explain your answer, why is there an ajax call for this purpose ? – Sikorski Feb 25 '15 at 12:18
1

ajax is there because of the phrase in the question "asynchronously loaded JavaScript file". It could be achieved using - script tag in HTML. But loading a script file only when necessary using ajax is an alternative. – Siva Senthil Feb 25 '15 at 12:29

Prototypical inheritance and constructors

2 Answers2