javascript - 分配返回匿名函数的匿名函数

Question

在 JavaScript 中这样调用有什么区别:

var reader = new FileReader();

reader.onload = (function (theFile) {
    return function (e) {
        loadData(e.target.result); 
    };
})(file);

reader.readAsText(file);

和(结果在 loadData 函数中是相同的):

var reader = new FileReader();

reader.onload = function(e) {
    loadData(e.target.result);
}; 

reader.readAsText(file);

到目前为止，我一直使用 JavaScript 来完成简单的任务(输入验证、简单的 ajax 调用)，但现在我需要更深入的理解...

Answer 1

在您的特定情况下没有区别(请注意，您的第一个片段中的函数是使用参数 file 调用的，但是由于您忽略了它，所以它不应该有任何副作用)。但是，请看以下示例:

var reader = new FileReader();

var my_temporary_var = 42;

reader.onload = function(e){
    loadData(e.target.result, my_temporary_var);
}

到目前为止一切都是一样的。但是，如果您更改 my_temporary_var，它也会在您的匿名函数内部 中更改。为了防止这种情况，您创建了一个闭包:

reader.onload = (function(some_value) {
    return function(e){
        loadData(e.target.result, some_value);
    };
})(my_temporary_var);

您创建一个匿名函数，它接受您要绑定(bind)到另一个函数的参数，然后立即调用该函数。请注意，已解决对 my_temporary_var 的依赖。

其他例子

有些人喜欢在 for 循环中创建许多函数:

var i;
for(i = 0; i < myObjects.length; ++i)
    myObjects[i].onload = function(e) { myObjects[i].doSomething(); };

让我们假设 myObjects[0].onload 将首先处理，但 在 for 循环之后。给定的处理程序 function(e) { myObjects[i].doSomething(); }; 使用对象 myObjects[i]。但是，i == myObjects.length:我们访问了一个根本不存在的对象!由于我们尝试访问该函数的一个属性，我们将得到一个异常并且脚本将停止。

发生这种情况是因为匿名函数中的 i 是一个引用，而不是用作值。为了防止这种情况，您必须使用闭包:

var i;
for(i = 0; i < myObjects.length; ++i)
    myObjects[i].onload = (function(index){
        return function(e) { myObjects[index].doSomething(); };
    })(i);