"in"语句中使用的document.documentElement

Question

我在jQuery的源代码中看到了这段代码.我是javascript的新手,我想知道这是如何工作的.

if ( "getBoundingClientRect" in document.documentElement ) {
// do something...
}

它有什么不同

if(document.documentElement.getBoundingClientRect) {
// do something...
}

...？

Answer 1

这是使用in运算符的表达式.该in运营商检查是否目标对象有一个给定名称的属性(直接或通过对象的原型).

它正在做的是看看是否document.documentElement有一个带有名称的属性getBoundingClientRect(这是jQuery想要在浏览器提供它时使用的一个方便的函数).

它有什么不同 if(document.documentElement.getBoundingClientRect) { // do something... }

in不需要获取属性的值,只需检查它是否存在.另请注意,您列出的第二个表单将测试该属性值的真实性.在像功能的情况下getBoundingClientRect,这将是很好,但如果你想测试的东西,其价值可能会回来falsey( ,0,""等),那就即使属性存在失败.

在进行特征检测时,您会看到很多这样的事情.例如,如果您想知道浏览器是否支持HTML5 placeholder属性:

if ('placeholder' in document.createElement('input')) {
    // Yes, it does
}

这是一个我们无法使用表单的示例,if (document.createElement('input').placeholder)因为如果条件为false,我们将不知道它是否为假,因为该属性不存在,或者因为该属性存在但是具有假值(并且placeholderis的默认值"",这确实是假的).

无条件链接到功能检测列表.