Javascript Prototype Method Override Not Found

I have this base type: typeA = function () { }; typeA.prototype = { do = function() { alert ('do something'); }, doMore = function() { this.do(); } } and an inherited type t

Solution 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 = newtypeA();
typeB.prototype.do = function() { alert ("do something else"); };

var instance = newtypeB();
instance.doMore();

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

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 = newfoo();
alert( instance.bar ); //alerts 3
instance["bar"] = 55;  //add a variable to the instance object itselfalert( 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 = newtypeA();
typeB.prototype = foo;
foo.do = function() { alert ("do something else"); };
//^^ same as `typeB.prototype.do = function() { alert ("do something else"); };`var instance = newtypeB();
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 ;)

Solution 2:

You cannot use the word do because it is a reserved keyword (used in do while loop). You can, however, try this:

typeA.prototype = {
    "do": function() { ... }
    ...
};

typeA["do"]();

Solution 3:

It is better if you use constructor functions when working with prototypes.

What you have to do is instantiate the object be after you set its prototype of typeA. What you're doing is dynamically adding they new function of .do() to be after typeB is created. That is the only way you can do that.

functiontypeA() { };
typeA.prototype = {
    'do': function () { alert("do something"); },
    doMore: function () { this.do(); }
}
functiontypeB() { };
typeB.prototype = newtypeA();
typeB.prototype['do'] = function () { alert('doing from typeB'); };
var b = newtypeB();
//
b.do();