Beijiyang

就这样不停地挑战生活,再与之言和。

循环与闭包 之 for循环经典问题解释 / 结合《你不知道的JS》与《高程》案例

案例一

for (var i = 1; i <= 5; i++) {
  setTimeout( function timer() {
    console.log(i);
  }, i*1000)
}

输出结果:

  • 当时间是固定的数,如0、1000、6000,执行结果就是0、1、6秒后,一次输出五个6;
  • 当时间是 i*1000, 输出是:每隔1秒,输出一个6,共5次。

代码中到底有什么‘缺陷’,导致它的行为与 语义暗示的不一致呢?

缺陷 是 我们试图假设
循环中的每一个迭代在运行时,都会给自己’捕获’一个i的副本。但是,根据作用域的工作原理,实际情况是,尽管循环中的五个函数是在各个迭代中分别定义的,但是它们都被封闭在一个共享的全局作用域中,因此实际上只有一个 i。

这样说的话,当然所以函数共享一个 i 的引用。
循环结构让我们误以为背后还有更复杂的机制在起作用,实际上并没有。如果将延迟函数的回调重复定义5次,完全不使用循环,那它同这段代码是完全等价的。

                             ----《你不知道的JS 上卷》p49

show me the code

第一种情况

setTimeout()第二个参数是个常数

书中那段话就是说,

for (var i = 1; i <= 5; i++) {
  setTimeout( function timer() {
    console.log(i);
  }, 1000)
}

等价于

// 注:执行栈内循环需要先结束

var i = 1;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 2;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 3;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 4;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 5;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 6;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行

// 循环结束后,线程读取任务列表,将定时事件对应的异步任务(回调函数)入栈执行
console.log(i);
console.log(i);
console.log(i);
console.log(i);
console.log(i);
console.log(i);

输出情况:
当时间是固定的数,如0、1000、6000,执行结果就是0、1、6秒后,一次输出五个6;

等到这些回调执行时,i的值就是6

第二种情况

setTimeout()第二个参数含有变量

同上

for (var i = 1; i <= 5; i++) {
  setTimeout( function timer() {
    console.log(i);
  }, i*1000)
}

等价于


var i = 1;
// 定时器将其回调函数加入任务列表,执行栈清空一秒后执行
var i = 2;
// 定时器将其回调函数加入任务列表,执行栈清空二秒后执行
var i = 3;
// 定时器将其回调函数加入任务列表,执行栈清空三秒后执行
var i = 4;
// 定时器将其回调函数加入任务列表,执行栈清空四秒后执行
var i = 5;
// 定时器将其回调函数加入任务列表,执行栈清空五秒后执行
var i = 6;
// 定时器将其回调函数加入任务列表,执行栈清空六秒后执行

// 循环结束后,线程读取任务列表,将定时事件对应的异步任务(回调函数)入栈执行
console.log(i);

console.log(i);

console.log(i);

console.log(i);

console.log(i);

console.log(i);

输出情况:
当时间是 i*1000, 输出是:每隔1秒,输出一个6,共5次。

因为等到这些回调执行时,i的值就是6

HOW TO FIX IT

我知道,闭包!

for (var i = 1; i <= 5; i++) {
  (function() {
    setTimeout( function timer() {
      console.log(i);
    }, i*1000)
  })()
}

然并卵,还是一秒一个6,五次

因为,新加上的 IIFE(创建并立即执行) 作用域是”空的”,它并没有自己的变量。执行栈清空后,线程从任务队列里读取回调函数,它们还是引用那个唯一的全局变量i。

正确的闭包姿势:

通过在闭包作用域中添加自己的变量,从而在每次迭代中,捕获i的副本。

for (var i = 1; i <= 5; i++) {
  (function() {
    var j = i
    setTimeout( function timer() {
      console.log(j);
    }, j*1000)         //至于时间这里,是i 是j无所谓
  })()
}

更简洁的姿势:

for (var i = 1; i <= 5; i++) {
  (function(j) {
    setTimeout( function timer() {
      console.log(j);
    }, j*1000)
  })(i) 
}

由此,能够输出:1 2 3 4 5,一秒一个

ES6的打开方式: 块作用域

for (var i = 1; i <= 5; i++) {

    let j = i
    setTimeout( function timer() {
      console.log(j);
    }, j*1000)

}

或直接在for循环头部里,每次迭代都声明一次

for (let i = 1; i <= 5; i++) {

    setTimeout( function timer() {
      console.log(i);
    }, i*1000)

}

案例2

《JavaScript高级程序设计第三版》 p181

var a = function ceateFunctions() {
  var result = new Array();

  for (var i = 0; i < 10; i++) {
    result[i] = function () {
      return i
    }
  }

  return result
}
console.log(a()[0]());
//0 - 9 输出都是10  

道理一样。

都是因为引用同一个i,且没能在迭代中捕获i的副本,或者没能在迭代中及时按当时的值执行。直到i早都变成10了,才执行,RHS引用的结果当然是i此刻的值,即10。

闭包处理:

var a = function ceateFunctions() {
  var result = new Array();

  for (var i = 0; i < 10; i++) {
  // 创建匿名函数,并立即执行之,将执行结果赋值给数组
    result[i] = (function(num) {
      return function() {
        return num;
      };
    })(i);
  }

  return result;
};
console.log(a()[0]());

相关文章: 单线程 JavaScript 的异步机制与经典 for 循环面试题

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Beijiyang999/article/details/74188430
个人分类: javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

循环与闭包 之 for循环经典问题解释 / 结合《你不知道的JS》与《高程》案例

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭