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

Question

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

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

它与

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

...？

score 6 · Accepted Answer

这是一个使用inoperator的表达式。in操作员检查目标对象是否具有给定名称的属性（直接或通过对象的原型）。

它所做的是查看是否document.documentElement有一个带有名称的属性getBoundingClientRect（如果浏览器提供了它，这是一个方便的函数 jQuery 想要使用）。

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

in不需要获取属性的值，只需检查它是否存在。另请注意，您列出的第二种形式将测试属性值的真实性。在这样的函数的情况下getBoundingClientRect会很好，但如果你想测试一些可能返回错误值的东西（0,""等），即使该属性存在，它也会失败。

在进行特征检测时，你会经常看到这种事情。例如，如果您想知道浏览器是否支持 HTML5placeholder属性：

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

这是一个我们无法使用表单的示例，if (document.createElement('input').placeholder)因为如果条件为假，我们将不知道它是假的，因为属性不存在，还是假的，因为属性存在但有一个假值（以及placeholderis 的默认值""，这确实是错误的）。

score 3 · Accepted Answer

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

句法：

prop in objectName

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

objectName ：对象的名称。

document.documentElement对象和"getBoundingClientRect"属性也是如此。

score 2 · Accepted Answer

2

与if'a' in obj不同。obj.aa == false

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

于 2012-05-15T05:37:09.587 回答

score 1 · Accepted Answer

操作员检查给in定属性是否存在或存在于指定对象中。所以，

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

将检查对象getBoudingClientRect中的属性是否可用document.documentElement。

此外，您可能想阅读 John Resig 本人的文章，他已经很好地解释了为什么使用它。

4 回答 4