[回归基础]循环中的闭包

10年服务1亿前端开发工程师

如果你碰到过这种情况:

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("i value is" + i);
  };
}
funcs[0]();
funcs[1]();
funcs[2]();

你预期的输出是:

i value is 0
i value is 1
i value is 2

而实际的输出却是:

i value is 3
i value is 3
i value is 3

原因是闭包的捕获机制 以及 i 在内部进行表示。要解决这个问题,你可以这么做:

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = (function(value) {
    console.log("i value is " + i);
  })(i);
}

上述代码有效地复制 i 的值将其传递给闭包。或者你可以这么做:

for (let i = 0; i < 3; i++) {
  console.log("i value is " + i);
}

在这里,let 将变量作用域限制在 for 循环中,并在每次迭代中生成一个新的值,因此,我将按照预期的那样在闭包中绑定不同的值。

赞(0) 打赏
未经允许不得转载:WEB前端开发 » [回归基础]循环中的闭包

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    第一例子 — 预期的输出就是实际输出
    第二例子 — 是错的

    呆羊羊1年前 (2017-09-05)回复
    • 不好意思,已经全部更新

      1年前 (2017-09-06)回复
  2. #-48

    ···
    for (var i = 0; i < 3; i++) {
    console.log("i value is" + i);
    }
    ···
    的输出是
    ···
    i value is0
    i value is1
    i value is2
    ···

    提莫1年前 (2017-09-07)回复
    • 已经修改

      1年前 (2017-09-07)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏