javascript - 如何构造 javascript 回调以便正确维护函数范围

Question

我正在使用 XMLHttpRequest，我想在成功回调函数中访问局部变量。

代码如下:

function getFileContents(filePath, callbackFn) {  
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            callbackFn(xhr.responseText);
        }
    }
    xhr.open("GET", chrome.extension.getURL(filePath), true);
    xhr.send();
}

我想这样调用它:

var test = "lol";

getFileContents("hello.js", function(data) {
    alert(test);
});

这里，test 将超出回调函数的范围，因为在回调函数内只能访问封闭函数的变量。将 test 传递给回调函数以便 alert(test); 正确显示 test 的最佳方法是什么？

编辑:

现在，如果我有以下代码调用上面定义的函数:

for (var test in testers) {
    getFileContents("hello.js", function(data) {
        alert(test);
    });
}

alert(test); 代码仅打印 for 循环中 test 的最后一个值。我如何让它在调用函数 getFileContents 期间打印 test 的值？ (我想在不更改 getFileContents 的情况下执行此操作，因为它是一个非常通用的辅助函数，我不想通过将 test 之类的特定变量传递给它来使其具体化.

Answer 1

使用您提供的代码 test 仍将在回调内的范围内。 xhr 不会，除了 xhr.responseText 作为 data 传入。

根据评论更新:

假设您的代码如下所示:

for (var test in testers)
  getFileContents("hello"+test+".js", function(data) {
    alert(test);
  });
}

随着此脚本的运行，test 将被分配 testers 中键的值 - getFileContents 每次都会被调用，这会启动一个在后台请求。当请求完成时，它会调用回调。 test 将包含循环中的 FINAL VALUE，因为该循环已经完成执行。

您可以使用一种称为闭包的技术来解决此类问题。您可以创建一个返回回调函数的函数，创建一个新的作用域，您可以使用以下方法保留变量:

for (var test in testers) {
  getFileContents("hello"+test+".js", 
    (function(test) { // lets create a function who has a single argument "test"
      // inside this function test will refer to the functions argument
      return function(data) {
        // test still refers to the closure functions argument
        alert(test);
      };
    })(test) // immediately call the closure with the current value of test
  );
}

这基本上会创建一个新范围(连同我们的新函数)，它将“保持”test 的值。

同样的事情的另一种写法:

for (var test in testers) {
  (function(test) { // lets create a function who has a single argument "test"
    // inside this function test will refer to the functions argument
    // not the var test from the loop above
    getFileContents("hello"+test+".js", function(data) {
        // test still refers to the closure functions argument
        alert(test);
    });
  })(test); // immediately call the closure with the value of `test` from `testers`
}