为一个JavaScript特性（intersectionObserver）创建特征检测

Question

有没有一种方法可以将内置的JavaScript方法存储在变量中，以便为当这种方法在某些浏览器中不可用时设置不同的行为？

我的具体情况是intersectionObserver在Safari或旧的MS浏览器中不可用。我有一些由此触发的动画，并希望如果intersectionObserver不可用，则关闭它们。

本质上我想要做的就是：

var iO = intersectionObserver;

if ( !iO ) {
 // set other defaults
}

我其实不想为了一个功能加载一个 polyfill 或者库？

感谢！

Emily

- pjk_ok

---

如果("IntersectionObserver" in window)？var iO = window.IntersectionObserver; - Sebastian Simon

这不起作用 - 它还在我的代码编辑器中抛出一个错误 @Xufox？ - pjk_ok

什么是？哪个错误？ - Sebastian Simon

那行代码。我尝试使用它来创建变量，但是我的编辑器将其下划线为错误，并且无法处理代码？此外，我以前从未见过if语句与两个问号组合在一起。我应该包括这些问号吗？除非这是某种我应该知道的速记方式？我真的很困惑。 - pjk_ok

我没有将问号标记为代码，因此它们不属于代码。 - Sebastian Simon

Answer 1

in 运算符被广泛用于检测浏览器支持的功能。JavaScript 功能作为 window 对象的属性全局可用。因此，我们可以检查 window 元素是否具有该属性。

if("IntersectionObserver" in window){
    /* work with IntersectionObserver */
}
if("FileReader" in window){
    /* work with FileReader */
}

in 运算符会检查指定的属性是否位于指定对象或其原型链中，如果存在返回 true。
语法：prop in object
[来源：developer.mozilla.org]

因此您也可以将结果保存在一个 boolean 变量中，并在代码中稍后使用它。

var iO = "IntersectionObserver" in window; /* true if supported */

if ( !iO ) {
 // set other defaults
}

- Munim Munna

---

谢谢Munim。我简直不敢相信有人会踩这个问题。如果你愿意，可以随意点赞它。 - pjk_ok

这就是官方w3c polyfill的检测方式。 - FellowMD