javascript - 有人可以解释如何使用 PreventDefault 作为 if 表达式吗？

Question

在同行评审代码以修复 IE 中的视差问题时，我看到了这一点奇怪的代码。

    if (window.navigator.userAgent.indexOf("Trident") >= 0) {
        $('body').mousewheel(function (event, delta) {
            // disable native scroll
            if (event.preventDefault) {
                event.preventDefault();
            } else { // IE fix
                event.returnValue = false;
            };
            $html.stop().animate({
                scrollTop: $html.scrollTop() + (-delta * 500)
            }, 'slow');
        });
    }

代码来自this site但作者没有提到如何将 () 从函数调用末尾删除并将其塞入 if 语句中。 Javascript 似乎对此没问题，因为它是一种非常宽松的语言，但我不明白这里发生的事情的概念？

If this is an IE browser
  when some scrolling happens
    [*what is this?*]
    add jQuery scroll animation to replace it
  done
fi

Answer 1

这称为"feature detection" 是用于确定客户端是否支持特定 API 的常见模式。它比 "browser detection" 更受欢迎，第一行代码执行的操作 (window.navigator.userAgent.indexOf("Trident") >= 0)。检查用户代理字符串不仅是一项始终是移动目标的全职工作，而且用户代理字符串很容易被欺骗，即使不是，它们也并不总是准确的。

您的特定用例源于这样一个事实:Internet Explorer 在 IE 9 之前不支持 preventDefault()，因此如果您的代码需要在支持此标准以及 IE 8 的浏览器中运行或者更少，您需要以适当的方式为适当的客户端停止事件。

在 JavaScript 中，对象属性只不过是键，“方法”在技术上并不存在。函数是一等公民(它们是数据)，可以像任何其他数据一样简单地存储在属性中。您可以像访问任何对象属性一样直接访问该函数(作为数据):

var myObj = {
  foo:"something",
  bar:function(){ console.log("bar says hello"); }
};

console.log(myObj.foo);  // Just accessing the value of the foo property
console.log(myObj.bar);  // Just accessing the value of the bar property

但是，函数可以被调用，在 JavaScript 中，调用运算符是 ()。因此，如果您查找可以调用的内容并想要调用它，只需在其末尾添加 () 即可:

var myObj = {
  foo:"something",
  bar:function(){ console.log("bar says hello"); }
};

myObj.bar(); // Accessing the value of the bar property and invoking the result

因此，如果一个对象具有某个属性(键)并且您查询它，您将获得它的值。在我们通常所说的“方法”的情况下，该值将是存储在属性中的函数。而且，如果属性(键)不存在，您将收到 undefined 返回给您。

考虑到所有这些，我们可以继续讨论相关主题......

当您检索一个值时，它可以被认为是“true”或“falsy”，这只是意味着，如果您将该值转换为 bool 值，它会转换为 true 或 假。 false、空 ("")、null、undefined 和 0 值为虚假的，其他一切都是真实的。

以下尝试获取 event 对象的 preventDefault 属性值。:

// Notice we're not calling the function (no parenthesis)
// We're just retrieving the value of the property
if(event.preventDefault) 

在支持 preventDefault() 的用户代理中，将返回 native 函数，并且由于它处于 if 条件，因此它将转换为 bool 值。此处将转换为 true，然后进入 if 语句的 true 分支。如果该属性不存在，则返回 undefined，该值会转换为 false 并进入 false 分支。

确定属性是否存在的另一种方法是 in 运算符:

if(preventDefault in event)

这会检查对象的继承属性以及“自己的”属性。

这是另一个例子。您会注意到，以下代码中的任何位置都不会实际调用 foo (您不会在控制台中看到“foo was invoked!”)。我们只是查找 foo 属性的值:

var myObj = {
  foo : function(){ console.log("foo was invoked!"); }
};

// Notice were not calling foo (no parenthesis). We're just looking up its value:
console.log(myObj.foo);

// What about a property that doesn't exist?
console.log(myObj.foo2);  // undefined

// And we can convert that value to a Boolean
console.log(Boolean(myObj.foo));   // true
console.log(Boolean(myObj.foo2));  // false

if(myObj.foo){
  console.log("foo exists");
} else {
  console.log("foo doesn't exist");
}