Javascript ie10中clientHeight的奇怪行为

我尝试通过以下代码检查属性clientHeight：

document.documentElement != null && document.documentElement.hasOwnProperty('clientHeight')

由于document.documentElement.hasOwnProperty（'clientHeight'），结果为false

---

但当我通过document.documentElement中的“clientHeight”检查它时，它返回true。在Chrome、FF、Opera中，一切都很好。这种行为的原因是什么？

没有回答您的问题（原因是什么），但仍希望与大家分享，因此从评论扩展：

有财产的对象并不一定意味着该对象“拥有”财产；它可以在原型链中

检查此项（在Chrome DevTools控制台中）：

如您所见，

foo

确实存在于所创建的对象中，但它不是对象的“所有”，只是位于原型链中

当谈到DOM原型时，事情可能会稍微复杂一点，因为不同的平台可能以不同的方式实现相同的东西

根据，

clientHeight

是在

元素中定义的

在Firefox的控制台中，我得到：

[17:09:55.701] document.documentElement.hasOwnProperty("clientHeight")
[17:09:55.702] false
--
[17:10:19.894] "clientHeight" in document.documentElement
[17:10:19.895] true

>>> document.documentElement.hasOwnProperty("clientHeight")
true
>>> "clientHeight" in document.documentElement
true

document.documentElement.hasOwnProperty("clientHeight")
true
"clientHeight" in document.documentElement
true

但在Opera Dragonfly控制台中，我得到：

[17:09:55.701] document.documentElement.hasOwnProperty("clientHeight")
[17:09:55.702] false
--
[17:10:19.894] "clientHeight" in document.documentElement
[17:10:19.895] true

>>> document.documentElement.hasOwnProperty("clientHeight")
true
>>> "clientHeight" in document.documentElement
true

document.documentElement.hasOwnProperty("clientHeight")
true
"clientHeight" in document.documentElement
true

在Chrome DevTools控制台中，我得到：

[17:09:55.701] document.documentElement.hasOwnProperty("clientHeight")
[17:09:55.702] false
--
[17:10:19.894] "clientHeight" in document.documentElement
[17:10:19.895] true

>>> document.documentElement.hasOwnProperty("clientHeight")
true
>>> "clientHeight" in document.documentElement
true

document.documentElement.hasOwnProperty("clientHeight")
true
"clientHeight" in document.documentElement
true

（目前没有IE10供我测试，但如果我没记错的话，IE10遵循Firefox风格）

所以在Chrome和Opera中，
clientHeight
被定义为“每个元素”，而不是
element.prototype
。再往前走一点，您可以看到：

Object.getPrototypeOf(document.documentElement)
HTMLHtmlElement {insertAdjacentHTML: function, insertAdjacentText: function, click: function, insertAdjacentElement: function, getAttribute: function…}
    constructor: function HTMLHtmlElement() { [native code] }
    __proto__: HTMLElement
        click: function click() { [native code] }
        constructor: function HTMLElement() { [native code] }
        insertAdjacentElement: function insertAdjacentElement() { [native code] }
        insertAdjacentHTML: function insertAdjacentHTML() { [native code] }
        insertAdjacentText: function insertAdjacentText() { [native code] }
        __proto__: Element

至于你的问题，我想说的是，无论你试图实现什么，不要依赖于这个“标准”，使用特征检测


当我尝试在JS中克隆对象时，我第一次注意到这种行为

当尝试克隆
ClientRect
对象（例如
document.body.getBoundingClientRect（）
）时，当我想稍微花哨一点时，我首先尝试：

var cloned={};
if(cloned.__proto__) {
    cloned.__proto__=source.__proto__;
}
for(var i in source) {
    if(Object.prototype.hasOwnProperty.call(source,i)){
        cloned[i]=source[i];
    }
}

在Chrome中，它工作正常，但在Firefox中，克隆的
看起来像
{width:undefined，height:undefined…}
。因此，我将
中..的
更改为：

for(var in source) {
    cloned[i]=source[i];
}

在Firefox中，这在第一次
i
时给了我一个例外，因为这6个属性是只读的

在一些失败之后，我得出结论，Firefox中的
ClientRect
是不可构造的，因此不是严格的、完全可克隆的；它可以在原型链中。我考虑过，但希望他们不会重新发明轮子=）我不知道我是否在等待ie开发人员在这个线程中。可能应该询问如何使其跨浏览器（仅在中使用）。但是你的回答肯定很好。@Suhan我可以问一下为什么你需要
clientHeight
放在
document.documentElement
自己的属性中吗？在我看来，这应该是对象的属性，而不是所有对象的属性。我花了一点时间才意识到它不是（）