JavaScript Basic - Closure - 《代码知识结构》

闭包无处不在
闭包的应用场景

闭包是一个在 JavaScript 当中比较生涩的知识，它好像一直被一层迷雾笼罩，让人好像理解了又说不上具体是什么。我查看了许多关于讲解闭包的材料，其中有两种对于闭包的解释我认为比较容易被接受：

当创建它的上下文被销毁后，仍能引用该上下文作用域当中的 自由变量 的函数称为闭包。
当函数离开被定义时所处的词法作用域仍可以 记住并访问 所在作用域环境，这时就产生了闭包。

根据上面的两种说法，我们看到关键的词汇是函数和 作用域 ，接下来我们通过例子来更清晰的认识闭包，示例如下：

function foo() {
  var a = 'foo'
  return function baz() {
    console.log(a)
  }
}
var bar = foo()
bar() // foo

结合上面两种闭包概念，我将上方的示例执行步骤分解如下：

从执行角度看， foo 函数执行引擎会创建相应的 上下文对象，上下文对象当中包含了作用域的相关信息，记录了当前作用域当中存在标识符 a 和 baz ，return 语句会将 baz 函数向外传递；
赋值语句结束后函数 foo 的执行就终止了，此时引擎会回收函数执行时的上下文对象。上下文对象被回收，也代表作用域当中的标识符会随之消失（正常情况下）。
函数 baz 离开了被定义时的词法作用域，在全局作用域当中通过函数别名的方式调用。此时它需要寻找一个变量 a ，遵循词法作用域的变量查找规则最终打印出了 foo 作用域当中 a 变量的值。

上面的分析中本应该被销毁的变量 a 被神奇的保留了下来，我们可以将这种现象或是机制理解为闭包。
总结一下，闭包的机制是由函数和词法作用域的查询方式来实现的。我将它理解为：
当函数在 被定义时的词法作用域以外 的地方 被调用 时，仍然能够访问定义时的作用域的行为就称为闭包。

闭包无处不在

其实闭包在我们日常编写的程序中无处不在，只是你并不是有意识的认知并将其定义为一个闭包，其中典型的例子就是 回调函数 ，请看以下代码：

function foo() {
  var isShow = true
  setTimeout(() => {
    isShow = false
    console.log(isShow)
  }, 1000)
}
foo()
复制代码

上面的代码当中传入 setTimeout 的回调函数其实就是闭包的体现，在 1000 毫秒过后它所执行的环境已经不是函数 foo 产生的环境，但是它仍然能够引用当时的词法作用域。
诸如此类例子还有许多，事件、Ajax请求、通信等等其实都是闭包的应用

闭包的应用场景

1 React Hooks中闭包的坑

我们先来看一下使用 setState 的更新机制：
在React的setState函数实现中，会根据一个变量isBatchingUpdates 判断是直接更新this.state还是放到队列中回头再说。而isBatchingUpdates 默认是false,也就表示setState会同步更新this.state。但是，有一个函数 batchedUpdates，这个函数会把isBatchingUpdates修改为true，而当React在调用事件处理函数之前就会调用这个batchedUpdates，造成的后果，就是由React控制的事件处理程序过程setState不会同步更新this.state。
知道这些，我们下面来看两个例子。

class Example extends React.Component {
   constructor() {
     super();
     this.state = {
       val: 0
     };
   }
   componentDidMount() {
     this.setState({val: this.state.val + 1});
     console.log(this.state.val);    // 第 1 次 log
     this.setState({val: this.state.val + 1});
     console.log(this.state.val);    // 第 2 次 log
     setTimeout(() => {
       this.setState({val: this.state.val + 1});
       console.log(this.state.val);  // 第 3 次 log 1 
       this.setState({val: this.state.val + 1});
       console.log(this.state.val);  // 第 4 次 log 2
     }, 0);
   }
   render() {
     return null;
   }
 };

打印结果是： 0, 0, 2, 3。

第一次和第二次都是在react自身生命周期内，触发 isBatchingUpdates 为true，所以并不会直接执行更新state, 而是加入了 dirtyComponents，所以打印时获取的都是更新前的状态 0
两次setState时，获取到 this.state.val 都是 0，所以执行时都是将0设置为1，在react内部会被合并掉，只执行一次。设置完成后 state.val值为1。
setTimeout中的代码，触发时 isBatchingUpdates为false，所以能够直接进行更新，所以连着输出 2, 3

上面代码改用react hooks的话

import React, { useEffect, useState } from 'react';
const MyComponent = () => {
    const [val, setVal] = useState(0);
    useEffect(() => {
        setVal(val+1);
        console.log(val);
        setVal(val+1);
        console.log(val);
        setTimeout(() => {
            setVal(val+1);
            console.log(val);
            setVal(val+1);
            console.log(val);
        }, 0)
    }, []);
    return null
};
export default MyComponent;

https://segmentfault.com/a/1190000023425946

2. 闭包应用场景之setTimeout

原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果

    setTimeout(function(param){
        alert(param)
    },1000)
    //通过闭包可以实现传参效果
    function func(param){
        return function(){
            alert(param)
        }
    }
    var f1 = func(1);
    setTimeout(f1,1000);

3. 闭包应用场景之回调

我们定义行为，然后把它关联到某个用户事件上（点击或者按键）。我们的代码通常会作为一个回调（事件触发时调用的函数）绑定到事件上
**

<body>
    <p>哈哈哈哈哈哈</p>
    <h1>hhhhhhhhh</h1>
    <h2>qqqqqqqqq</h2>
    <a href="#" id="size-12">12</a>
    <a href="#" id="size-14">14</a>
    <a href="#" id="size-16">16</a>
<script>
    function changeSize(size){
        return function(){
            document.body.style.fontSize = size + 'px';
        };
    }
    var size12 = changeSize(12);
    var size14 = changeSize(14);
    var size16 = changeSize(16);
    document.getElementById('size-12').onclick = size12;
    document.getElementById('size-14').onclick = size14;
    document.getElementById('size-16').onclick = size16;
</script>
</body>

4. 闭包应用场景之封装变量

用闭包定义能访问私有函数和私有变量的公有函数
**

    var counter = (function(){
        var privateCounter = 0; //私有变量
        function change(val){
            privateCounter += val;
        }
        return {
            increment:function(){   //三个闭包共享一个词法环境
                change(1);
            },
            decrement:function(){
                change(-1);
            },
            value:function(){
                return privateCounter;
            }
        };
    })();
    console.log(counter.value());//0
    counter.increment();
    counter.increment();//2

共享的环境创建在一个匿名函数体内，立即执行。
环境中有一个局部变量一个局部函数，通过匿名函数返回的对象的三个公共函数访问。