Question

I have this base type:

typeA = function () {

};

typeA.prototype = {
  do = function() { alert ("do something"); },
  doMore = function() { this.do(); }
}

and an inherited type typeB:

typeB = function () {

};
typeB .prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };

When I create an instance of typeB and call doMore, I get an error indicating that this.do is not a function. Can I do this sort of thing in Javascript?

Answer 1

Is this example what you are looking for?

typeA = function () { };

typeA.prototype = {
  do : function() { alert ("do something"); }, //use : instead of = here
  doMore : function() { this.do(); }
}

typeB = function () { };

typeB.prototype = new typeA();
typeB.prototype.do = function() { alert ("do something else"); };

var instance = new typeB();
instance.doMore();

You use : when declaring the properties of an object and = when assigning values to variables. 😀

Additional explanation:

This is where the interesting stuff happens:

typeB.prototype = new typeA();

When you access a function or variable of an object with ., the browser first looks in the object itself to see if that variable is defined there. This is why you can do things like this:

var foo = function() {};
foo.prototype.bar = 3

instance = new foo();
alert( instance.bar ); //alerts 3
instance["bar"] = 55;  //add a variable to the instance object itself
alert( instance.bar ); //alerts 55, instance variable masks prototype variable

This shows how there are two ways that something can be ‘in’ an object. It can either be in the object itself (which you can also do by adding this.bar = 55 to the constructor) or it can in the object’s prototype.

Hence, when you say typeB.prototype = new typeA(); you are putting everything in that instance of typeA into typeB'prototype. What you’ve basically said is “Hey browser, if you can’t find something in an instance of typeB, look to see if its in this instance of typeA!”

Turns out there’s nothing actually in that instance, just things in its prototype that end up getting used when the browser can’t find a variable of that name in that object itself. When you call instance.doMore(), the browser can’t find it in instance, so it looks in typeB.prototype, which you just set to an instance of typeA. Since it can’t find anything called doMore in that instance, it looks in its prototype, and finally finds a definition for doMore and happily calls it.

One interesting thing is that you can still mess around with things that are actually in that instance of typeA that you set to be the prototype:

//earlier code the same

foo = new typeA();
typeB.prototype = foo;
foo.do = function() { alert ("do something else"); };
//^^ same as `typeB.prototype.do = function() { alert ("do something else"); };`

var instance = new typeB();
instance.doMore();

While this is kind of cool when you understand what’s going on IMHO, the extra layer of indirection (checking to see if stuff is defined in the instance of typeA before looking in typeA.prototype) is probably not the best idea, and your code would probably be clearer if you just said this:

typeB.prototype = typeA.prototype;

(sorry if you already knew everything I just told you, but I thought I’d describe how things were working under the hood 😉