Firefox 和chrome 的constructor.prototype 行为区别？

Posted 2023-02-22

【中文标题】Firefox 和chrome 的constructor.prototype 行为区别？

【英文标题】：Firefox and chrome behavior difference between constructor.prototype?

【发布时间】：2012-04-18 13:53:38

【问题描述】：

经过这么长时间的试验，我发现__proto__或Object.getPrototypeOf()方法是在DOM对象中遍历原型链的正确方法。

使用一系列constructor.prototype实际上并没有遍历两个浏览器的原型链。（虽然这是ECMA标准中定义的方式，constructor的prototype属性就是你的原型对象）。

欢迎提出任何建议或意见...

p1 = document.getElementById("test");  // div element

//Prototype Object of p1
p2 = element.constructor.prototype;

//Prototype object of p2
p3 = element.constructor.prototype.constructor.prototype;

console.log(p2 === p3);  // true in chrome(howcome they same ?), false in firefox

q2 = element.__proto__;
q3 = element.__proto__.__proto__;

console.log(q2 === q3);  // false in both browser

【参考方案1】：

我完全同意鲍里斯... 你应该在这里搜索更多细节（https://www.google.com/search?q=javascript+prototype+chain），但基本上如果你想浏览 DOM 对象中的元素，你只需要像下面这样：

function exploreElement(element)
        contentToString = "";
        for (var i in element)
            contentToString += i + " : " + element[i] + "<br />";   
        
        document.write(contentToString);
    
    exploreElement(document);

prototype 和 proto 是完全不同的东西......

如果你有这样的构造函数：

function SomeObject()
        this.__proto__.id = "instance_default_name";
        SomeObject.id = "SomeObject";
        // __proto__ HERE to access the prototype!!!
    

然后您可以通过原型向此构造函数添加方法（我假设您在文档中有一个 id 为“myInstance”的空 div 和另一个 id 为“test”的空 div）：

SomeObject.prototype.log = function(something)
        document.getElementById("myInstance").innerhtml += something + "<br />";
    

添加一些用于测试目的的方法：

SomeObject.prototype.setId = function(id)
    this.id = id;

SomeObject.prototype.getId = function()
    return this.id;

SomeObject.prototype.getClassName = function()
    return SomeObject.id;   

然后，你可以用 new 操作符实例化 SomeObject 并做一些这样的测试：

myInstance = new SomeObject();
myInstance.setId("instance_1");
aDivElement = document.getElementById("test");  
aDivElement.style.backgroundColor = "rgb(180,150,120)";
myInstance.log("p1 = " + aDivElement);
// [object HTMLDivElement]
myInstance.log("p1 backgroundColor = " + (aDivElement.style.backgroundColor));
myInstance.log("myInstance = " + myInstance);
// [object Object] an instance of SomeObject
myInstance.log("myInstance.constructor = " + myInstance.constructor);
// function SomeObject()  this.__proto__.id = "instance_default_name"; SomeObject.id = "SomeObject"; 
myInstance.log("myInstance.constructor.prototype = " + myInstance.constructor.prototype);
// .prototype WHEN CALLED by the instance NOT __proto__
// The constructor of myInstance is SomeObject and the prototype of SomeObject is the prototype of all instances of SomeObject
myInstance.log("myInstance.id = " + myInstance.getId());
// id for the instance of SomeObject that you have instanciated 
myInstance.log("SomeObject.prototype.id = " + SomeObject.prototype.getId());
// id by default of the prototype
myInstance.log("myInstance.constructor.prototype.id = " + myInstance.constructor.prototype.getId());
// id by default of the prototype
myInstance.log("myInstance.getClassName() = " + myInstance.getClassName());
// myInstance.getClassName() = SomeObject

我不知道这是否对您有所帮助，但我希望这对您的搜索有所帮助。 最好的祝福。 尼古拉斯

【参考方案2】：

我认为您误解了构造函数/原型的工作原理。

给定一个构造函数，它的 .prototype 将是用它构造的东西的原型。原型的 .constructor 指向构造函数。

所以特别是，Element.prototype.constructor === Element 应该成立。由于错误，它不一定在浏览器中。这就是为什么您在 Chrome 中看到 p2 == p3 的原因。