“in”语句中使用的document.documentElement

Question

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

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

与

有什么不同

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

...

Answer 1

这是使用in operator的表达式。 in运算符检查目标对象是否具有给定名称的属性（直接或通过对象的原型）。

它正在做的是查看document.documentElement是否有一个名为getBoundingClientRect的属性（如果浏览器提供了jQuery，这是一个方便的函数）。

  

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

有何不同

in不需要获取属性的值，只需检查它是否存在即可。另请注意，您列出的第二个表单将测试该属性的值的真实性。对于像getBoundingClientRect这样的函数来说没问题，但是如果你想测试其价值可能会变回虚假（0，""等）的东西，它会失败即使财产存在。

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

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

这是我们无法使用if (document.createElement('input').placeholder)形式的示例，因为如果条件为假，我们不知道它是否为假，因为该属性不存在，或者因为该属性存在而为false但是有一个假值（placeholder的默认值是""，这确实是假的。）

Gratuitous link to list of feature detections.

Answer 2

来自MDN的

如果指定的属性在指定的对象中，则in运算符返回true。

语法：

prop in objectName 

丙     表示属性名称或数组索引的字符串或数字表达式。

objectName：对象的名称。

所以document.documentElement是对象，"getBoundingClientRect"是属性。

Answer 3

如果'a' in obj，则obj.a与a == false不同。

obj = {a: false};
'a' in obj;
> true
obj.a
> false

Answer 4

in运算符检查给定属性是否存在于指定对象中。 SO，

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

将检查getBoudingClientRect对象中是否有document.documentElement属性。

此外，您可能希望阅读John article表格John Resig本人，他已经很好地解释了为什么使用它。