javascript - 匿名函数作为回调

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我正在寻求帮助，以了解为什么我使用匿名函数的方式在某些情况下会出错。

在下面的代码片段中，我使用稍后调用的函数填充 2 个数组。

var arr1 = [];
var arr2 = [];

// callback function
var func = function(i){
    return function(){$("body").append(i);}
};

var i = 1;
while(i <= 5)
{
    arr1.push(function(){$("body").append(i);});
    arr2.push(func(i));
  i++;
}

// invoke functions
$("body").append("Output from arr1 == ");
for(var c = 0; c < arr1.length; c++){ arr1[c](); }
$("body").append("<br> Output from arr2 == ");
for(var c = 0; c < arr1.length; c++){ arr2[c](); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

现在，我想我明白为什么 arr1输出66666 ，因为在调用时，i == 6因为它在创建时尚未作为参数存储在该函数中，i保留其最后已知的值？

我真正不明白的是为什么我收到 TypeError: arr2[c] is not a function当我将回调函数更改为:

var func = function(i){
    $("body").append(i);
};

为什么会发生这种情况，这是实现此功能的最合适/最优雅的方式吗？

Answer 1

对于问题的第一部分，你是对的，它将保留最新的已知值。为了避免这种情况，您需要使用 closure 。例如:

(function(x) {
   arr2.push(func(x));
})(i);

闭包通常可以用作“范围黑客”。这种情况下，只会保证注入(inject)的值为i的恒流值。 .

对于问题的第二部分，您的困惑可能是由于您插入了函数的结果(即: func(i) )而不是函数本身( func )。

在第一个场景中，您返回显式 function(){...}因此您的数组将包含一个可以使用运算符“()”调用的函数。

在第二种情况下，您返回 $(<...>).append() ，不再保证您的返回值是一个函数。在这种情况下，结果是“jQuery”(请参阅​​: jQuery append )而不是函数，因此错误是正确的。您不能将该值用作函数。

一种出路是:

arr2.push(func);

然后:

arr2[c](c);

或者可能是这样的:

(function(x){
    arr2[x](x);
})(c);

如果需要，始终 console.log 会很有帮助。在假设正确之前，先了解数组中填充的内容。由于 Javascript 不是一种类型化语言，因此您可能会先花一段时间再怀疑有什么问题，因为它看起来按预期工作。

希望这有帮助!