JavaScript 进阶（二）下

关注

发布于: 1 小时前

写在前面，兜兜转转，来来回回，从开始学习 JS 到现在已经工作这些来年，我和 JS 每天的生活可以用如胶似漆来形容。但自认为对他认识的还不够深刻。故从头再来，从基础开始。Go！！！

闭包

闭包的定义很简单：函数 A 返回了⼀个函数 B，并且函数 B 中使⽤了函数 A 的变量，函数 B 就被称为闭包。

function A() {
    let a = 1
    function B() {
        console.log(a)
    }
    return B
}

复制代码

你是否会疑惑，为什么函数 A 已经弹出调⽤栈了，为什么函数 B 还能引⽤到函数 A 中的变量。因为函数 A 中的变量这时候是存储在堆上的。现在的 JS 引擎可以通过逃逸分析辨别出哪些变量需要存储在堆上，哪些需要存储在栈上。

经典⾯试题，循环中使⽤闭包解决 var 定义函数的问题

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

复制代码

⾸先因为 setTimeout 是个异步函数，所有会先把循环全部执⾏完毕，这时候 i 就是 6 了，所以会输出⼀堆 6 。

解决办法三种，第⼀种使⽤闭包

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

复制代码

第⼆种就是使⽤ setTimeout 的第三个参数

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

复制代码

第三种就是使⽤ let 定义 i 了

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

复制代码

因为对于 let 来说，他会创建⼀个块级作⽤域，相当于

{ // 形成块级作⽤域    let i = 0    {        let ii =         setTimeout( function timer() {            console.log( i );        }, i*1000 );    }    i++    {        let ii = i    }    i++    {        let ii = i    }    ...}

复制代码

END~~~

发布于: 1 小时前阅读数: 2

Augus

关注

爱瞎搞的软件开发工程师 2021.06.10 加入

某摸鱼集团

发布

暂无评论

创作场景

JavaScript 进阶（二）下

闭包

Augus

评论