如何避免从闭包中访问可变变量

Question

我有一些这样的代码：

for(var id=0; id < message.receiver.length; id++){
   var tmp_id = id;
   zlib.gzip(JSON.stringify(message.json), function(err, buffer){
                        ...
   pushStatusPool[message.receiver[tmp_id]] = null; // fix memory leak
   delete pushStatusPool[message.receiver[tmp_id]];
   ...
   });
}

我收到警告，在闭包中使用 tmp_id 可能会导致问题，因为它是一个可变变量。

我怎样才能避免这种情况？我的意思是我怎么能发送一个不可变变量到回调，因为这是一个 for 循环，我不能更改 zlib.gzip 的代码？或者换句话说，我如何将参数传递给闭包？

Answer 1

您需要创建一个范围以使用自执行函数正确捕获tmp_id。这是因为整个 for 循环是一个范围，这意味着每次通过时，您都在捕获相同的变量。所以回调会以错误的 id 结束，因为 temp_id 的值会在回调被调用之前改变。

不过，我会忽略（或关闭）警告，这似乎是在抱怨因为temp_id 是可变的，您可能会重新分配它。这有点傻。如果您真的想修复它，请尝试使用 const 关键字而不是 var。

for(var id=0; id < message.receiver.length; id++){
   (function(){
       const tmp_id = id;
       zlib.gzip(JSON.stringify(message.json), function(err, buffer){
                        ...
           pushStatusPool[message.receiver[tmp_id]] = null; // fix memory leak
           delete pushStatusPool[message.receiver[tmp_id]];
           ...
       });
   })();
}

Answer 2

我遇到了同样的问题，并通过将 id 传递给闭包来稍微修改 user24359 的答案来解决它：

for(var id=0; id < message.receiver.length; id++){
   (function(tmp_id){
       zlib.gzip(JSON.stringify(message.json), function(err, buffer){
                        ...
           pushStatusPool[message.receiver[tmp_id]] = null; // fix memory leak
           delete pushStatusPool[message.receiver[tmp_id]];
           ...
       });
   })(id);
}

Answer 3

这里简化了 user24359 的最佳答案。 这是解决方案：

var object = {a:1,b:2};

for (var y in object){
    (function(){const yyy = y;
        setTimeout(function(){console.log(yyy)},3000);})();
}

上面的代码记录了 a b 并且是解决方案。 以下代码记录 b b ：

var object = {a:1,b:2};
for (var y in object){

    setTimeout(function(){console.log(y)},3000);
}

Answer 4

我在量角器中遇到了同样的问题。使用以下代码解决了它-

(function(no_of_agents){
              ptor.element.all(by.repeater('agent in agents').column('displayName')).then(function(firstColumn){
                    console.log(i, '>>>>>Verifying the agent Name');
                    var agentsSorted = sortAgentsByName();
                    //verify the agent name
                    expect(firstColumn[no_of_agents].getText()).toEqual(agentsSorted[no_of_agents].name);
                    //now click on the agent name link
                    firstColumn[no_of_agents].click();
                    ptor.sleep(5000);
              });
            })(no_of_agents);

Answer 5

@user24359 答案是一个很好的解决方案，但您可以简单地将 var 关键字替换为 let 关键字。

for(var id=0;

变成

for(let id=0;

查看详情here。

编辑：正如 Heriberto Juárez 所建议的，它只适用于支持 EcmaScript6 的浏览器。

Answer 6

在var (tmp_id) 位于回调函数的上层范围内的循环中创建闭包是common mistake，由于var 不是块作用域，因此应该避免这种情况。正因为如此，并且因为在循环中创建的每个闭包都共享相同的lexical environment，所以当调用回调函数时，变量将始终是最后一个迭代值（即message.receiver.length - 1 和tmp_id）。您的 IDE 检测到此行为并正确投诉。

为避免该警告，有几种解决方案：

• 将 var 替换为 let 确保每个创建的闭包在每次迭代中都有自己的范围 tmp_id 定义：

  for (var id = 0; id < message.receiver.length; id++) {
    let tmp_id = id;
    zlib.gzip(JSON.stringify(message.json), function(err, buffer) {
      // Do something with tmp_id ...
    });
  }
  

• 利用IIFE（如gennadi.w did）在每次迭代中创建一个词法环境。

• 使用工厂函数（createCallback）在每次迭代中创建回调函数：

  const createCallback = tmp_id => function(err, buffer) {
    // Do something with tmp_id ...
  };
  for (var id = 0; id < message.receiver.length; id++) {
    zlib.gzip(JSON.stringify(message.json), createCallback(id));
  }
  

• bind 回调函数上的变量，它们在其中将前置添加到其参数中：

  for (var id = 0; id < message.receiver.length; id++) {
    zlib.gzip(JSON.stringify(message.json), function(tmp_id, err, buffer) {
      // Do something with tmp_id (passed as id) ...
    }.bind(this, id));
  }
  

如果可能，从 ECMAScript 2015 起应避免使用 var，因为这种行为容易出错。