8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

JavaScript 循环内的闭包——简单实用的例子

Ferruccio 1月前

142 0

var funcs = [];// 让我们创建 3 个函数for (var i = 0; i < 3; i++) { // 并将它们存储在 funcs 中 funcs[i] = function() { // 每个都应该记录其值。console.log(\'My value:\', i)...

var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value:", i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

它输出的是:

我的价值:3
我的价值:3
我的价值:3

而我希望它输出:

我的价值:0
我的价值:1
我的价值:2


当使用事件监听器导致函数运行延迟时,也会出现同样的问题:

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value:", i);
  });
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

…或者异步代码,例如使用Promises:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

for in 循环 for of 中也很明显

const arr = [1,2,3];
const fns = [];

for (var i in arr){
  fns.push(() => console.log("index:", i));
}

for (var v of arr){
  fns.push(() => console.log("value:", v));
}

for (const n of arr) {
  var obj = { number: n }; // or new MyLibObject({ ... })
  fns.push(() => console.log("n:", n, "|", "obj:", JSON.stringify(obj)));
}

for(var f of fns){
  f();
}

这个基本问题的解决方案是什么?

帖子版权声明 1、本帖标题:JavaScript 循环内的闭包——简单实用的例子
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Ferruccio在本站《arrays》版块原创发布, 转载请注明出处!
最新回复 (0)
  • @Wladimir:您认为 .bind() 是“正确答案”是不正确的。它们各有各的用处。使用 .bind() 时,您无法在不绑定 this 值的情况下绑定参数。此外,您还会获得 i 参数的副本,但无法在调用之间对其进行变异,而这有时是必要的。因此,它们是完全不同的构造,更不用说 .bind() 实现历来很慢。当然,在简单的示例中,两者都可以工作,但闭包是一个需要理解的重要概念,这就是问题所在。

返回
作者最近主题: