Difference in Prototype Inheritance, Firefox vs Chrome

Question

For the following code:

function Mammal(){
    this.hair = true;
    this.backbone = true;
    return this;
}

function Canine(){
    this.sound= 'woof';
    return this;
}
Canine.prototype = new Mammal(); 

function Dog(name){
    this.tail=true;
    this.name=name;
    return this; 
}
Dog.prototype = new Canine();

var aspen = new Dog('Aspen');

var aspenProto = aspen.__proto__

Firebug (Firefox) wants to tell me aspenProto is Mammal{}, while Chrome is saying Canine{}.

Can anyone tell me why they display different, and if anyone else has ran into this issue?

Answer 1

Facts (credits go to @IHateLazy):

aspenProto.constructor is Mammal. This is because the constructor is actually an attribute of Mammal.prototype, set at the method creation time. Canine.prototype.constructor is not Canine, since the prototype (holding the constructor property) was overwritten by new Mammal().

Tests:

aspen.constructor = function Hello(){}; // aspen is Hello in Firebug,
                                        // Dog in Chrome
aspen.constructor.name = "test"         // still Hello in Firebug,
                                        // name is also Hello in both
aspen.constructor = function(){};       // aspen is Object in Firebug
aspen.constructor.name = "test"         // still Object in Firebug
aspen.constructor = null;               // still Object and Dog

({constructor: function Hello(){}})     // Hello in Firebug AND Chrome
({constructor: function (){}})          // Object in both (not surprisingly)
({constructor:{name:"Hi"}})             // "Object" in FB, "Hi" in Chrome

x={constructor:function(){})
x.constructor.name="Hello"              // x is Object in both

x=new Object()
x.constructor=function Hello(){}        // x is Hello in both

new (function(){})()                    // Object in both
new (function(){
  this.constructor=function Hello(){}
})()                                    // Hello in both

Conclusion:

Firebug always relies on the object's own constructor property to name it. If the constructor is a named function, it uses the constructor name (which is not writable - thanks @IHateLazy). If the constructor property is an anonymous function or not a function at all, then Firebug uses "Object" instead.

Chrome holds each object's actual constructor as an internal property. Only if that property is not accessible (the object was not constructed) or is Object, it looks at the object's constructor property. If the constructor is a named function, it uses its internally stored name. If the constructor is not a function or is anonymous it uses the name property.