原型继承，Firefox与Chrome的区别 [英] Difference in Prototype Inheritance, Firefox vs Chrome

问题描述

对于以下代码：

  function Mammal（）{
 this.hair = true; 
 this.backbone = true; 
返回此; 
} 
 
函数Canine（）{
 this.sound ='woof'; 
返回此; 
} 
 Canine.prototype = new Mammal（）; 
 
函数Dog（name）{
 this.tail = true; 
 this.name = name; 
返回此; 
} 
 Dog.prototype = new Canine（）; 
 
 var aspen = new Dog（'Aspen'）; 
 
 var aspenProto = aspen .__ proto__ 
  

Firebug（Firefox）想知道我 aspenProto 是 Mammal {} ，而Chrome正在说 Canine {} 。

有谁可以告诉我他们为什么显示不同，如果有其他人遇到过这个问题？

解决方案

事实（积分转到@IHateLazy）：

aspenProto.constructor 是 Mammal 。这是因为构造函数实际上是Mammal.prototype的一个属性，在方法创建时设置。 Canine.prototype.constructor 不是 Canine ，因为原型（持有构造函数 property）被新Mammal（）覆盖。

测试：

  aspen.constructor = function Hello（）{}; // aspen是Firebug中的Hello，
 // Chrome中的狗
 aspen.constructor.name =test//仍然是Firebug中的Hello，
 //名称也是两个$中的Hello b $ b aspen.constructor = function（）{}; // aspen是Firebug中的对象
 aspen.constructor.name =test//仍然是Firebug中的对象
 aspen.constructor = null; //仍然是对象和狗
 
（{constructor：function Hello（）{}}）//你好Firebug和Chrome 
（{constructor：function（）{}}）//两个对象（毫不奇怪）
（{constructor：{name：Hi}}）// FB中的对象，Chrome中的Hi
 
x = {constructor：function （）{}）
 x.constructor.name =Hello// x是
 $中的对象b $ bx = new Object（）
 x.constructor = function Hello（） {} // x是两个
 
中的Hello（函数（）{}）（）// 
中的对象new（function（）{
 this.constructor = function Hello（）{} 
}）（）// 
中的Hello  

结论：

Firebug总是依赖于对象自己的构造函数属性来命名它。如果构造函数是一个命名函数，它使用构造函数 name （这是不可写的 - 谢谢@IHateLazy）。如果构造函数属性是匿名函数或根本不是函数，则Firebug使用Object代替。 / p>

Chrome将每个对象的实际构造函数保存为内部属性。 仅如果该属性不可访问（对象未构造）或是Object，则它会查看对象的构造函数属性。如果构造函数是命名函数，则它使用其内部存储的名称。如果构造函数不是函数或是匿名的，则使用 name 属性。

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?

解决方案

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.

这篇关于原型继承，Firefox与Chrome的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！