Question

我正在尝试了解绑定事件时变量作用域的工作原理。

以下示例正常工作：

function clickHandler() {
    alert(foo);
}

var foo = true;

$('div').on({
    'click': clickHandler
});

请参阅：http://jsfiddle.net/OliverJAsh/7fM5U/4/

然而，当我做出这个简单的改变时，它不再起作用了：

function clickHandler() {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': clickHandler
    });
}());

请参阅：http://jsfiddle.net/OliverJAsh/7fM5U/3/

你将如何使第二个例子起作用？我可以对.call做任何事吗？我想知道这是因为在定义变量的地方调用了函数，所以我希望它可以访问它。

更新

我理解为什么它不能访问变量 - 但是因为函数是从定义变量的地方调用的，所以我想知道如何在不移动范围的情况下使其工作。我想我问的是.call方法。

Answer 1

如果使用var在函数中声明变量，则只能在函数中访问该函数，或者在函数内的函数内访问该函数

clickHandler在声明foo的函数之外声明，因此无法访问。

如果您将clickHandler的声明移到函数内，you'll see it works fine;

(function () {
    var foo = true;


    function clickHandler() {
        alert(foo);
    }

    $('div').on({
        'click': clickHandler
    });
}());

如果您无法移动clickHandler，则必须对其进行修改才能访问foo作为参数;

function clickHandler(foo) {
    alert(foo);
}

(function () {
    var foo = true;

    $('div').on({
        'click': function () {
            // We can access `foo` here because the function is being declared within the scope of `foo`.
            clickHandler(foo);
        }
    });
}());

Answer 2

在javascript中，变量的范围包含在函数中 - 因此foo的范围位于(function () { .. }());不可见的匿名clickHandler中。

要解决此问题，您可以将clickHandler函数带入匿名函数，如下所示：

(function () {
  var foo = true;
  var clickHandler = function() {
    alert(foo);
  }

  $('div').on({
    'click': clickHandler
  });
}());

<强>更新

如果您无法在clickHandler函数中更改范围并且也不希望更改签名，则可以使用the call function，如下所示：

function clickHandler () {
  alert(this);
}

(function () {
  var foo = true;
  $('div').on({
    'click': function() { clickHandler.call(foo); }
  });
}());

Answer 3

因为var foo没有公开定义....试试这段代码

var foo = true;
function clickHandler() {
    alert(foo);
}
(function () {
    foo = true;
    $('div').on({
        'click': clickHandler
    });
}());

Answer 4

当您使用匿名函数包装函数时，javascript解析器将所有块解析在一起并将其作为单独的块执行。

您必须将函数clickHandler的定义放入块

JavaScript变量定义和范围

4 个答案: