Search code examples
javascriptinheritanceprototypeprototypal-inheritance

Javascript Prototypal Inheritance?


I'been doing some inheritance in js in order to understand it better, and I found something that confuses me.

I know that when you call an 'constructor function' with the new keyword, you get a new object with a reference to that function's prototype.

I also know that in order to make prototypal inheritance you must replace the prototype of the constructor function with an instance of the object you want to be the 'superclass'.

So I did this silly example to try these concepts:

function Animal(){}
function Dog(){}

Animal.prototype.run = function(){alert("running...")};

Dog.prototype = new Animal(); 
Dog.prototype.bark = function(){alert("arf!")};

var fido = new Dog();
fido.bark() //ok
fido.run() //ok

console.log(Dog.prototype) // its an 'Object' 
console.log(fido.prototype) // UNDEFINED
console.log(fido.constructor.prototype == Dog.prototype) //this is true

function KillerDog(){};
KillerDog.prototype.deathBite = function(){alert("AAARFFF! *bite*")}

fido.prototype = new KillerDog();

console.log(fido.prototype) // no longer UNDEFINED
fido.deathBite(); // but this doesn't work!

(This was done in Firebug's console)

1) Why if all new objects contain a reference to the creator function's prototype, fido.prototype is undefined?

2) Is the inheritance chain [obj] -> [constructor] -> [prototype] instead of [obj] -> [prototype] ?

3) is the 'prototype' property of our object (fido) ever checked? if so... why is 'deathBite' undefined (in the last part)?


Solution

  • 1) Why if all new objects contain a reference to the creator function's prototype, fido.prototype is undefined?

    All new objects do hold a reference to the prototype that was present on their constructor at the time of construction. However the property name used to store this reference is not prototype as it is on the constructor function itself. Some Javascript implementations do allow access to this 'hidden' property via some property name like __proto__ where others do not (for example Microsofts).

    2) Is the inheritance chain [obj] -> [constructor] -> [prototype] instead of [obj] -> [prototype] ?

    No. Take a look at this:-

    function Base() {}
    Base.prototype.doThis = function() { alert("First"); }
    
    function Base2() {}
    Base2.prototype.doThis = function() { alert("Second"); }
    
    function Derived() {}
    Derived.prototype = new Base()
    
    var x = new Derived()
    
    Derived.prototype = new Base2()
    
    x.doThis();
    

    This alerts "First" not Second. If the inheritance chain went via the constructor we would see "Second". When an object is constructed the current reference held in the Functions prototype property is transfered to the object hidden reference to its prototype.

    3) is the 'prototype' property of our object (fido) ever checked? if so... why is 'deathBite' undefined (in the last part)?

    Assigning to an object (other than a Function) a property called prototype has no special meaning, as stated earlier an object does not maintain a reference to its prototype via such a property name.