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

Question

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

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

和

有什么区别

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

...?

Answer 1

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

它正在做的是查看 document.documentElement 是否有一个名为 getBoundingClientRect 的属性(如果浏览器提供它，jQuery 会想使用它) .

How is it different from 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 因为属性不存在，或者 false 因为属性存在但是有一个错误的值(placeholder 的默认值是 ""，这确实是错误的) .

Gratuitous link to list of feature detections.