javascript - Chrome 和 Firefox 之间怎么会有区别？

Question

我正在使用基于 for(.. in ..) 和 hasOwnProperty 的递归函数来克隆对象，这在 IE 和 FF 中工作正常...但在 Chrome 中不行。

当使用 for(... in ...) 迭代对象的成员时，如果对象是 DOM 对象，Firefox 和 Chrome 会为 hasOwnProperty 给出不同的结果。

在 Chrome 控制台中输入以下内容与在 Firebug(FF) 中的控制台中输入以下内容会给出不同的结果:

var t = document.createElement("table");
var tr = t.insertRow(-1);
for(var p in tr) if(tr.hasOwnProperty(p)) console.log(p);

Firefox 输出:

构造函数
添加事件监听器

Chrome 输出:

clientLeft
滚动高度
第一个元素子
偏移父级
ch
偏移宽度
isContentEditable
隐藏
previousElementSibling
父元素
本地名称
children
所有者文档
节点值
最后一个元素子
行索引
向左偏移
标签名
类名
前缀
内部HTML
previous sibling
命名空间URI
编号
子元素计数
内文
向左滚动
客户端高度
对齐
文本内容
下一个 sibling
滚动宽度
偏移高度
关闭
客户端宽度
节点名
风格
语言
滚动顶部
偏移顶部
子节点
baseURI
nextElementSibling
v对齐
sectionRowIndex
类列表
标题
第一个 child
属性
数据集
外部文本
细胞
父节点
客户端顶部
标签索引
内容可编辑
外层HTML
目录
最后一个 child
底色
节点类型
拼写检查
可拖动

所有标记为 true 的 hasOwnProeperty 额外属性导致我的代码中“无限/足以崩溃”回避。有没有办法确定一个属性是否是内置的 DOM 对象属性？或者其他一些解决方案..

Answer 1

最简单的解决方案是检查 .cloneNode方法并使用它(如果存在)。

这意味着您的克隆方法将检查任何 DOM 节点并在其上使用预定义的 DOM 方法。这应该可以完全避免您的问题。

至于你的实际问题。 Chrome 和 Firefox 似乎不同意什么属于原型(prototype)以及什么属于 HTMLTableRowElement(以及任何其他元素)的对象。

比较 firefox 和 chrome 中的 console.dir(HTMLTableRowElement)。

在 firefox 中，所有这些属性都存在于 HTMLTableRowElement 原型(prototype)中。 chrome 原型(prototype)只有几个方法。 (delecteCell 和 insertCell)。

DOM 规范中没有任何地方说明 HTMLElements 的属性是应该在原型(prototype)上定义还是在对象上定义，所以这只是您不应该依赖的东西。

无论哪种方式，都可以使用 .cloneNode，因为它是一种本地方法，因此比您可以用 JavaScript 编写的任何东西都更好/更快。

Chrome 伪实现:

function HTMLTableRowElement() {
    ...
    this.nextSibling = ...;
    this.nodeName = ...;
    this.nodeType = ...;
    ...
}

HTMLTableRowElement.prototype.deleteCell = function() { ... };
HTMLTableRowElement.prototype.insertCell = function() { ... };

Firefox 伪实现

function HTMLTableRowElement() {
    ...
}

HTMLTableRowElement.prototype.nextSibling = ...;
HTMLTableRowElement.prototype.nodeName = ...;
HTMLTableRowElement.prototype.nodeType = ...;
...
HTMLTableRowElement.prototype.deleteCell = function() { ... };
HTMLTableRowElement.prototype.insertCell = function() { ... };