理解JavaScript的闭包

╰半夏微凉° 2022-04-27 23:08 260阅读 0赞

# 大纲 #

*  闭包真言
 *  理解闭包情景一：函数作为返回值
 *  理解闭包情景二：函数作为参数传递到其他函数中
 *  理解闭包情景三：循环和闭包
 *  实际开发中闭包的应用
 *  闭包优缺点

## 闭包真言 ##

*  JavaScript中闭包无处不在，你只需要能够识别并拥抱它。
 *  当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时就产生了闭包。

理解闭包需要搞懂JS的作用域，[我另外一篇文章：理解JavaScript的作用域][JavaScript]。

## 理解闭包 ##

### 闭包情景一：函数作为返回值 ###

function foo() {
        var a = 2;
    
        function bar() {
            console.log(a);
        }
    
        return bar;
    }
    
    var baz = foo();
    
    baz(); // 2
    复制代码

我们知道 `bar` 函数里面的 `a` 变量在外面是访问不到的，但调用 `baz` 方法为什么仍然能输出 `2` 呢？

原因：

*  首先，调用 `foo` 函数把 `bar` 方法函数作为返回值，且赋值了给 `baz` 变量。
 *  然后，`baz` 变量就存在了对 `bar` 函数的引用。
 *  最后，调用 `baz` 方法时，`a`去它的父级作用域（`foo`函数）查询得到该值，所以就输出了 `a` 值。

这就是闭包的作用之一：把函数作为返回值，外部的作用域可以能访问到函数作用域内部的变量。

### 闭包情景二：函数作为参数传递到其他函数中 ###

函数作为参数传递到其他函数中的原理和函数作为返回值差不多：

*  `foo` 函数的 `bar` 方法把内部的 `baz` 方法传入外部的 `bar` 方法中。
 *  外部的 `bar` 方法调用了传入的`baz`方法，`a`去它的父级作用域（foo函数）查询得到值，所以就输出了 `a` 值。

这就是闭包的作用之二：函数作为参数传递到其他函数中，外部函数作用域也可以访问到其他函数内部作用域的变量。

### 闭包情景三：循环和闭包 ###

#### 需求： ####

在循环里面添加一个定时器，想预期每秒打印一次对应的值，如按顺序输出`1，2，3，4，5`

#### 代码： ####

以下代码是不能完成预期结果，都输出 `6，6，6，6，6`，原因：`i` 都是同一个引用for循环最后的结果： `6`

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

#### 改进方案1 ####

*  把 `i` 当做参数传入一个立即执行函数中，立即执行函数每次迭代时都创建一个新的作用域。
 *  这时候 `i` 拥有了自己的函数内部作用域，保存到每个对应的 `i` 值 ，就能到达预期的输出 `1, 2, 3, 4, 5`结果。

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

#### 改进方案2 ####

方案1可知，使用ES6的 `let` 声明也有块级作用域。

for循环头部的let声明，每次迭代都会声明一次 `i`，那么每个 `i` 就有了自己的作用域，也能达到预期输出结果。

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

这就是闭包的作用之三：能让一个变量长期存储在内存中。

## 实际开发中闭包的应用 ##

### 收敛权限 ###

// 检测一个数字是否被使用过
    function isFirstLoad() {
        var _list = []
        return function (id) {
            if(_list.indexOf(id) >= 0) {
                return false
                
            }else {
                _list.push(id)
                
                return true
            }
        }
    }
    
    // 使用
    // 如果第一次使用该数字则返回true，反之返回false
    var firstLoad = isFirstLoad()
    firstLoad(10) // true
    firstLoad(10) // false
    firstLoad(20) // true
    复制代码

### 创建10个标签，点击的时候弹出来对应的序号 ###

// 创建10个<a>标签，点击的时候弹出来对应的序号
    for (var i = 0; i < 10; i++) {
        (function (i) {
            var a = document.createElement('a')
            a.innerHTML = i + '<br>'
            
            a.addEventListener('click', function (e) {
                e.preventDefault()
                console.log(i)
            })
            document.body.appendChild(a)
        })(i)
    }
    复制代码

## 闭包优缺点 ##

### 优点 ###

*  能让一个变量长期存储在内存中。
 *  避免全局变量的污染。
 *  私有成员的存在。

### 缺点 ###

*  常驻内存，增加内存使用量。
 *  使用不当会很容易造成内存泄露。

## 参考链接 ##

*  [《你不知道的JavaScript（上卷）》][JavaScript 1]
 *  [前端JavaScript面试技巧][JavaScript 2] by, 双越老师
 *  [全面理解Javascript闭包和闭包的几种写法及用途][Javascript], by 雲霏霏

[JavaScript]: https://juejin.im/post/5cd504b5f265da038c022f0e
[JavaScript 1]: https://link.juejin.im?target=http%3A%2F%2Fwww.ituring.com.cn%2Fbook%2F1488
[JavaScript 2]: https://link.juejin.im?target=https%3A%2F%2Fcoding.imooc.com%2Fclass%2F115.html%3Fmc_marking%3D4655172e1a62839eea65105dbf244230%26amp%3Bmc_channel%3Dsjkctjpc
[Javascript]: https://link.juejin.im?target=https%3A%2F%2Fwww.cnblogs.com%2Fyunfeifei%2Fp%2F4019504.html