JavaScript变量定义和范围

JavaScript variable definition and scope

本文关键字：范围 定义 变量 JavaScript      更新时间：2023-09-26

我试图了解绑定事件时变量作用域是如何工作的。

以下示例运行良好：

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方法。

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

clickHandler是在声明foo的函数之外声明的，因此它是不可访问的。

如果您将clickHandler的声明移动到函数中，您将看到它工作得很好；

(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);
        }
    });
}());

在javascript中，变量的作用域在函数内，因此foo的作用域位于匿名(function () { .. }());内，而clickHandler不可见。

要修复它，您可以将clickHandler函数引入匿名函数，如下所示：

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

更新

如果单击处理程序函数无法更改作用域，并且也不希望更改签名，则可以使用call函数，如下所示：

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

因为var foo没有公开定义。。。。试试这个代码

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

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

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

相关文章：