javascript - 使用回调的函数上下文

Question

为什么这两个不同的代码会产生不同的结果？

我的意思是第一个代码中定义的 foo2 和第二个代码中的 callback 是相同的，并且它们在相同的上下文中执行，在 foo.

第一个代码:

var foo = function () {
   var bar = 2;
   var foo2 = function () {
     console.log("bar: ", bar);
   }
   foo2();
}

foo() // 2

第二个代码:

var foo = function (callback) {
   var bar = 2;
   callback();
}

var callback = function () {
   console.log(bar);
}

foo(callback); // ReferenceError: bar is not defined

Answer 1

在第二个函数中，bar超出了范围——它只存在于函数“foo()”中；在函数“callback()”中，bar 不存在，这就是为什么您会收到 bar is not Defined 错误。我将更改它以接受参数并打印该参数，如下所示:

var foo = function (callback) {
   var bar = 2;
   callback(bar);
}

var callback = function (bar) {
   console.log(bar);
}

这样，回调将打印传入的 bar 值。另一种方法(取决于您的应用程序，但通常不推荐)是将 bar 定义为全局变量，位于任一函数之外:

var bar = 2;

var foo = function (callback) {
   callback();
}

var callback = function () {
   console.log(bar);
}

两种方法都有效，但第一种方法可以更好地封装代码并且不使用全局变量。

编辑:这是第一种方法的一个不太令人困惑的版本，最好不要在两种不同的用途中使用“bar”变量名称，只是为了可读性:

var foo = function (callback) {
   var bar = 2;
   callback(bar);
}

var callback = function (myBarParam) {
   console.log(myBarParam);
}

希望这对您有帮助!