1

为什么使用函数声明不能​​正常工作，但使用函数表达式却可以正常工作？假设唯一的区别是浏览器如何将它们加载到执行上下文中。

function foo(event){
    console.log('in foo');
}

$('.btn').on('click',foo(event)); 

$.ajax({
    beforeSend:function(){
        $('btn').unbind('click');
    },
    success: function(){
        $('btn').bind('click', foo(event));
    }
});

使用函数表达式效果很好：

var foo = function(event){
    console.log('in foo');
}
4

1 回答 1

8

这里：

$('.btn').on('click',foo(event));

您没有传递“函数表达式”。您正在传递调用函数“foo”的结果。这就是 JavaScript 语法的工作方式——如果你引用一个函数（通过名称或其他方式）并在其后面加上一个带括号的参数列表（可能为空），那么你就是在调用该函数。

这里：

var foo = function(event){
    console.log('in foo');
}

您正在创建一个函数，而不是传递它。请注意，在您的“foo”示例中，function关键字不存在。

如果您想将函数“foo”作为事件处理程序传递，只需按名称引用它：

$('.btn').on('click', foo);

这传递了对函数“foo”的引用而不调用它。jQuery API 将获取该函数引用并使用“foo”作为“click”事件的处理程序。

如果您需要在某处传递对函数的引用（例如 jQuery API），并且希望使用一些附加参数调用该函数，则有两种选择：

  1. 使用.bind()函数原型上的方法，或者
  2. 自己将函数包装在另一个函数中。

对于 jQuery 事件处理程序，第三种选择是提供一个对象作为.on(). 该对象将附加到event事件实际发生时传递的参数：

function foo(event) {
  var data = event.data;
  if (data.whatever) { // ...

然后，当您致电时.on()：

$('.btn').on('click', { whatever: true }, foo);
于 2013-12-12T21:21:48.417 回答