范围和异步 JavaScript

Question

我最近在工作中遇到了一个问题，至少根据我对 JavaScript 的了解，我得到了一个不可能的结果。我希望有人能解释这里发生了什么以及为什么实际结果与我的预期结果不同。

控制台中的预期结果

id: a , x: 1
id: b , x: 1
id: c , x: 1

控制台中的实际结果

id: c , x: 1
id: c , x: 2
id: c , x: 3

代码

function MyClass(id)
{
    var x = 0;

    return function()
    {
        return function()
        {
            x += 1;
            console.log("id: ", id, ", x: ", x);
        }
    }
}


function DoStuff(id)
{
    var q = MyClass(id);
    response_callback = q();
    setTimeout(function(){ response_callback(); }, 50);
}

DoStuff("a");
DoStuff("b");
DoStuff("c");

Answer 1

response_callback = q();

这个。您没有在任何范围内声明 response_callback，因此它隐含在全局范围内...

这意味着您每次调用 DoStuff() 时都会覆盖它。您认为您正在捕获和调用三个不同的函数，但只有一个......

 var response_callback = q(); // should set you back on track

当然，您现在的这种结构方式有点浪费MyClass 返回函数的能力。你实际上可以写：

function DoStuff(id)
{
  var q = MyClass(id);
  // ... do other strange and horrible things with q ...
  setTimeout(q(), 50);
}

...在没有不必要的关闭的情况下看到相同的结果。