使用回调的函数上下文

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的定义错误。 我将其更改为接受参数并打印该参数，如下所示：

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

希望这会有所帮助！

Answer 2

简短的答案，仅仅是因为您从某个地方调用了一个函数，并不意味着该函数可以访问您在调用范围内定义的所有内容。 但是，它可以访问定义范围内的所有内容。 在第一种情况下，它在定义时可以访问bar 。 在第二个示例中，它在定义时没有访问bar权限，因此在调用它时会抱怨。

长答案： https ： //developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope

Answer 3

在第一种情况foo2是的内部限定foo因此它可以访问所有的当地人的那foo访问。 当它绑定bar它无法在foo2找到它，然后在foo查找并使用它在那里找到的那​​个。

在callback情况下，它是在foo之外定义的。 因此，它看不到任何foo locals，而是得出该值未定义的结论

Answer 4

由于功能范围。 （含义变量只能在声明它们的范围内或在范围链中声明（继续）内访问）

在您的第二个示例中，这变得很聪明。 callback（）在全局范围内声明。 当foo（）然后调用callback（）时，bar变量将不可见，因为bar在另一个函数（foo（））中声明。 如果在函数外部（在全局范围内）声明了bar，则可以从任何位置访问它，这也意味着可以在任何函数内部访问。

这将工作：

var bar = 2;

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

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

foo();

但是，在您的第一个示例中，即使未在foo2（）中声明bar，也可以访问它。 这仅仅是因为如果javascript引擎找不到您尝试使用的变量，它将在“父”函数（或范围）中寻找相同的变量。 这称为范围链。

Answer 5

在这两个示例中，您将bar声明为函数foo的上下文。 该变量将在foo上下文及其所有“ 子上下文 ”中可用。

在第一个示例中，您在foo上下文中声明了第二个函数，因此您可以访问bar 。

在第二个示例中，未在foo上下文中声明回调。 bar不可用于回调，它不存在。

Answer 6

尝试

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

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

foo(callback);

看一下区别：foo中的bar是什么，回调中的baz是-以前，它是未定义的