www.bifa88.com 7

图例详解那道setTimeout与巡回闭包的杰出面试题,js中常会见试难题

图例详解那道setTimeout与循环闭包的经典面试题

2017/03/06 · JavaScript
· 1 评论 ·
settimeout,
闭包

原文出处: 波同学   

www.bifa88.com 1

配图与本文无关

我在详细图解作用域链与闭包一文中的结尾留下了一个关于setTimeout与循环闭包的思考题。

利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5

JavaScript

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

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

值得高兴的是很多朋友在读了文章之后确实对闭包有了更加深刻的了解,并准确的给出了几种写法。一些朋友能够认真的阅读我的文章并且一个例子一个例子的上手练习,这种认可对我而言真的非常感动。但是也有一些基础稍差的朋友在阅读了之后,对于这题的理解仍然感到困惑,因此应一些读者老爷的要求,借此文章专门对setTimeout进行一个相关的知识分享,愿大家读完之后都能够有新的收获。

在最初学习setTimeout的时候,我们很容易知道setTimeout有两个参数,第一个参数为一个函数,我们通过该函数定义将要执行的操作。第二个参数为一个时间毫秒数,表示延迟执行的时间。

setTimeout(function() { console.log(‘一秒钟之后我将被打印出来’) }, 1000)

1
2
3
setTimeout(function() {
    console.log(‘一秒钟之后我将被打印出来’)
}, 1000)

www.bifa88.com 2

上例执行结果

可能不少人对于setTimeout的理解止步于此,但还是有不少人发现了一些其他的东西,并在评论里提出了疑问。比如上图中的这个数字7,是什么?

每一个setTimeout在执行时,会返回一个唯一ID,上图中的数字7,就是这个唯一ID。我们在使用时,常常会使用一个变量将这个唯一ID保存起来,用以传入clearTimeout,清除定时器。

var timer = setTimeout(function() {
console.log(‘如果不清除我,我将会一秒之后出现。’); }, 1000)
clearTimeout(timer); // 清除之后,通过setTimeout定义的操作并不会执行

1
2
3
4
5
var timer = setTimeout(function() {
    console.log(‘如果不清除我,我将会一秒之后出现。’);
}, 1000)
 
clearTimeout(timer);  // 清除之后,通过setTimeout定义的操作并不会执行

接下来,我们还需要考虑另外一个重要的问题,那就是setTimeout中定义的操作,在什么时候执行?为了引起大家的重视,我们来看看下面的例子。

var timer = setTimeout(function() { console.log(‘setTimeout actions.’);
}, 0); console.log(‘other actions.’); //
思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

1
2
3
4
5
6
7
var timer = setTimeout(function() {
    console.log(‘setTimeout actions.’);
}, 0);
 
console.log(‘other actions.’);
 
// 思考一下,当我将setTimeout的延迟时间设置为0时,上面的执行顺序会是什么?

在浏览器中的console中运行试试看,很容易就能够知道答案,如果你没有猜中答案,那么我这篇文章就值得你点一个赞了,因为接下来我分享的小知识,可能会在笔试中救你一命。

在对于执行上下文的介绍中,我与大家分享了函数调用栈这种特殊数据结构的调用特性。在这里,将会介绍另外一个特殊的队列结构,页面中所有由setTimeout定义的操作,都将放在同一个队列中依次执行。

我用下图跟大家展示一下队列数据结构的特点。

www.bifa88.com 3

队列:先进先出

而这个队列执行的时间,需要等待到函数调用栈清空之后才开始执行。即所有可执行代码执行完毕之后,才会开始执行由setTimeout定义的操作。而这些操作进入队列的顺序,则由设定的延迟时间来决定。

因此在上面这个例子中,即使我们将延迟时间设置为0,它定义的操作仍然需要等待所有代码执行完毕之后才开始执行。这里的延迟时间,并非相对于setTimeout执行这一刻,而是相对于其他代码执行完毕这一刻。所以上面的例子执行结果就非常容易理解了。

为了帮助大家理解,再来一个结合变量提升的更加复杂的例子。如果你能够正确看出执行顺序,那么你对于函数的执行就有了比较正确的认识了,如果还不能,就回过头去看看其他几篇文章。

setTimeout(function() { console.log(a); }, 0); var a = 10;
console.log(b); console.log(fn); var b = 20; function fn() {
setTimeout(function() { console.log(‘setTImeout 10ms.’); }, 10); }
fn.toString = function() { return 30; } console.log(fn);
setTimeout(function() { console.log(‘setTimeout 20ms.’); }, 20); fn();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
setTimeout(function() {
    console.log(a);
}, 0);
 
var a = 10;
 
console.log(b);
console.log(fn);
 
var b = 20;
 
function fn() {
    setTimeout(function() {
        console.log(‘setTImeout 10ms.’);
    }, 10);
}
 
fn.toString = function() {
    return 30;
}
 
console.log(fn);
 
setTimeout(function() {
    console.log(‘setTimeout 20ms.’);
}, 20);
 
fn();

www.bifa88.com 4

上栗执行结果

OK,关于setTimeout就暂时先介绍到这里,我们回过头来看看那个循环闭包的思考题。

JavaScript

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

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

如果我们直接这样写,根据setTimeout定义的操作在函数调用栈清空之后才会执行的特点,for循环里定义了5个setTimeout操作。而当这些操作开始执行时,for循环的i值,已经先一步变成了6。因此输出结果总为6。而我们想要让输出结果依次执行,我们就必须借助闭包的特性,每次循环时,将i值保存在一个闭包中,当setTimeout中定义的操作执行时,则访问对应闭包保存的i值即可。

而我们知道在函数中闭包判定的准则,即执行时是否在内部定义的函数中访问了上层作用域的变量。因此我们需要包裹一层自执行函数为闭包的形成提供条件。

因此,我们只需要2个操作就可以完成题目需求,一是使用自执行函数提供闭包条件,二是传入i值并保存在闭包中。

JavaScript

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

1
2
3
4
5
6
7
8
for (var i=1; i<=5; i++) {
 
    (function(i) {
        setTimeout( function timer() {
            console.log(i);
        }, i*1000 );
    })(i)
}

www.bifa88.com 5

利用断点调试,在chrome中查看执行顺序与每一个闭包中不同的i值

当然,也可以在setTimeout的第一个参数处利用闭包。

JavaScript

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

1
2
3
4
5
6
7
for (var i=1; i<=5; i++) {
    setTimeout( (function(i) {
        return function() {
            console.log(i);
        }
    })(i), i*1000 );
}

www.bifa88.com, 1 赞 6 收藏 1
评论

www.bifa88.com 6

1、先理解一下作用域

如果我们初始化一个变量,比如:var a = 1;参与这段代码执行的几个角色包括:

引擎:从头到尾负责整个JavaScript程序的编译和执行

编译器:负责词法分析、语法分析及代码生成等任务

作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限

对于var a =
1;这段程序,引擎认为这里有两个完全不同的声明,一个在编译器编译时处理,另一个在引擎运行时处理。

首先编译器会将这段程序分解为词法单元,然后将词法单元解析成一个树结构,在代码生成阶段进行如下处理:

1.遇到var
a,编译器会先询问作用域中是否已经存在该名称的变量,如果是,会忽略该声明继续编译;如果否,会要求作用域在当前作用域集合中声明一个名为a的变量。

2.之后编译器会为引擎生成在运行时需要的代码,这些代码用来处理a =
2这个赋值操作。引擎运行时先问作用域是否有改变量,如果有则使用,如果没有,则向上一级作用域中查找。

如果引擎最终找到了a,就把1赋值给它,如果没有,就会抛出异常。

总结:变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量,然后在运行时引擎会查找该变量,如果有则对它赋值。

作用域是根据名称查找变量的一套规则,而作用域链是这套规则的具体实现

原文参考

2、作用域链

作用域链在执行上下文的创建阶段生成,是由当前环境以及上层环境的一系列变量对象组成。它的作用是保证对执行环境有权访问的所有变量和函数的有序访问。

标识符的解析是沿着作用域链一级一级向上查找作用域的过程,查找始终从作用域开始,找到则停止,否则一直向上查找,知道全局作用域,即作用域链的末尾。

通过一个例子理解一下:

var color = “blur”;

function changeColor() {

    var anotherColor = “red”;

    function swapColor() {   

        var tempColor = anotherColor;

        anotherColor = color;

        color = tempColor;

    }

}

以上代码共涉及三个执行环境:全局环境、changeColor的局部环境和swapColor的局部环境。通过图来展示作用域链:

www.bifa88.com 7

内部环境可以通过作用域链访问所有外部环境中的变量和函数,但是外部环境不能访问内部环境。

闭包跟作用域链息息相关,下面就来介绍一下闭包。

1.事件代理
给父元素添加事件,利用事件冒泡原理,在根据e.target来获取子元素
<ul id=”parentBox”>
<li class=”item”>1</li>
<li class=”item”>2</li>
<li class=”item”>3</li>
</ul>
let parentBox = document.getElementById(‘parentBox’);
parentBox.addEventListener(‘click’,function(e){
if(e.target && e.target.nodeName === ‘LI’){
let item = e.target;
console.log(item);
}
})
2.在循环中使用闭包
var arr = [1,2,3,4,5];
for(var i=0; i<arr.length; i++){
setTimeout(function(){
console.log(i)
},1000)
}
输出结果为:5,5,5,5,5
想要让i输出0,1,2,3,4
方法一使用闭包
for(var i=0; i<arr.length; i++){
setTimeout(function(j){// 这里将值传入
console.log(j)// 这里接受
}(i),1000)// 闭包的使用
}
方法二let关键字
for(let i=0; i<arr.length; i++){
setTimout(function(){
console.log(i)
},1000)
}
3.滚动页面和窗口调整时,触发事件。
核心思想利用setTimeout延迟功能,来处理事件。
// 参数一接受执行函数,参数二延迟时间
function debounce(fn,delay){
// 维护一个timer
let timer = null;
// 能访问timer的闭包
return function(){
// 通过this和arguments获取函数的作用域和变量
let context = this;
let args = arguments;
// 如果事件被调用,清除timer然后重新设置timer
clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(context,args);
},delay);
}
}

3、闭包

闭包的概念:当函数可以记住并访问所在的作用域(全局作用域除外)时,就产生了闭包,即使函数是在当前作用域之外执行的。简单来说,就是一个函数中又声明了一个函数,就产生了闭包。

function changeColor() {

    var anotherColor = “red”;

    function swapColor() {

        console.log(anotherColor);

    }

    return swapColor;

}

var fn = changeColor();

这样代码执行时,就把swapColor的引用复制给了全局变量fn,而函数的执行上下文,在执行完毕生命周期结束之后,执行上下文就会失去引用,进而其占用的内存空间被垃圾回收器释放。但是闭包的存在,打破了这种现象,因为swapColor的引用并没有被释放。所以闭包很容易造成内存泄漏的问题。

如何让下面的代码输出1,2,3,4,5

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

setTimeout(functiontimer(){

console.log(i);

},0);

}

  1. 使用中间变量承接一下

function fn(i) {

console.log(i);

}

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

setTimeout( fn(i), 0 );

}

通过传入实参缓存循环的数据,并且setTimeout的第一个参数是立即执行的函数,不执行不可以。

2、使用立即执行函数

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

setTimeout( (function timer() {

console.log(i);

})(), 0 );

}

3、用let或const声明

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

setTimeout( function timer() {

console.log(i);

}, 0 );

}

这个问题的主要原因是因为执行到setTimeOut时函数没有执行,而是把它放到了任务队列中,等到for循环结束后再执行。所以i最后都变成了5。

循环中的事件也会有这个问题,因为事件需要触发,大多数时候事件触发的时候循环已经执行完了,所以循环相关的变量就变成了最后一次的值。