javascript - 带或不带大括号调用函数作用域问题

Question

在 jquery 脚本中我经常看到这样调用的函数:

var somefunction = function(){
  $(this).doseomething()
}

$(someelement).click( somefunction );

在某个函数内 this 接缝引用被单击的元素。如果大括号用于调用函数，this 不会引用被单击的元素。

我个人不喜欢它。我想看看我的代码中使用的东西是否是函数。我更喜欢将 this 作为参数传递。到目前为止我就是这样做的:

var somefunction = function($clickedLink){
  $clickedLink.doseomething()
}

$(someelement).click(function(){ somefunction($(this)) });

如果不使用大括号，为什么我可以访问引用元素？一般来说，调用不带大括号的函数是一个好习惯吗？对性能有影响吗？

Answer 1

这不是大括号，而是任何用作事件处理程序的函数，以及 jQuery 调用事件处理程序的方式(在普通 JavaScript 中也是如此)，该函数的上下文将是事件触发的元素上。

为了在另一点上更清楚一点，您不是在没有括号的情况下调用该函数，而是传递对该函数的引用。例如，这表示“这是事件发生时运行的函数”:

$(someelement).click( somefunction );

您拥有的另一种方法执行相同的操作，只是额外的匿名函数的开销更大:

$(someelement).click(function(){ somefunction($(this)); });

function() { ... } 是您要传递来运行的函数(它是一个匿名函数，而不是您指定的函数)。直到点击事件somefunction真正被调用。

<小时/>

你可以用任何一种方法来做，但它们并不等价，当你直接传递一个函数时，this是元素，第一个参数是 event object ...您经常需要正确地停止传播或防止默认行为。