JS 关于闭包的简单认识

什么是闭包呢？一个函数能访问到其他函数作用域中的数据就称为闭包。简单理解就是，闭包其实就是一个函数。

关于闭包的学习之前，我们要先清除明白JS中的变量作用域。什么是变量作用域呢，变量作用域包含着局部变量和全局变量，从字面上看也很容易理解，局部变量是定义在函数内部的，而全局变量是定义在全局的。函数内部是可以直接访问到全局变量，而在函数外部是无法访问得到函数内部的。

那么如果我们硬是希望能访问到函数内部的变量怎么办呢？那这时候我们就可以使用闭包了。

闭包的简单使用：

function f1() {
        let n = "Joker";

        function f2() {    //f2是一个闭包
            alert(n)
        }

        return f2();
    }
    f1()

我们先来看看这两个父子函数，我们在f1的函数内部又嵌套了一个f2函数，并在f1函数中把f2函数返回出去，在f2函数中使用了f1函数中的变量，由于f2的存在是依赖于f1函数的，因此f1也不会在调用结束后被垃圾回收机制回收。通过这种方式，我们就能从函数外部访问到内部的变量啦。

闭包的自我调用：

 let add = (function () {
        let counter = 0;
        return function () {
            return counter += 1;
        }
    })();
    console.log(add()); //1
    console.log(add()); //2
    console.log(add()); //3

这里的变量add其实就是拿到了这个立即执行函数的返回值，也就是说拿到每次counter相加后的值。而add变量可以作为函数的方式调用，并且他能够访问到函数上一层作用域的计数器，我们把这个称之为闭包。

闭包在防抖节流上的应用：

此时我们希望点击btns按钮后btns能匀速的往右边平移，做一个简单的平移动画。

let btns = document.querySelector("button");
    let left = 0;
    btns.addEventListener("click", function () {
        let that = this;

        setInterval(function () {
            that.style.left = left++ + 'px'
        }, 100)
    })

但是当我们点击了多次button后就出现了左右抖动的bug。这是为什么呢？

因为每当我们每次点击时，就会产生一个环境，就会使left重新赋值为1，因此会出现这种抖动现象。

其实解决防抖的方法很简单。我们只需要把left变量定义到点击事件之外即可，此时每当我们触发点击事件的时候，就不会重新给left变量赋值了。

let btns = document.querySelector("button");
    let left = 0;
    btns.addEventListener("click", function () {
        let that = this;
        setInterval(function () {
            that.style.left = left++ + 'px'
        }, 100)
    })

当我们解决了button左右抖动问题后，又发现了一个新的问题，就是每当我们多次点击按钮时，这个按钮的平移速度就会变得越来越快，那这个问题我们又应该怎么解决呢？其实解决方案跟防抖问题差不多。

  let btns = document.querySelector("button");
    let left = 0;
    let interval = false;
    btns.addEventListener("click", function () {
            let that = this;
            if (!interval) {
                interval = true;
                setInterval(function () {
                    that.style.left = left++ + 'px'
                }, 100)
            }
        })

此时我们在点击事件外部定义一个布尔类型的变量，初始值为false，然后给计时器做判断，当我们的interval变量为false时才触发定时器。因此定时器只有在第一次点击的时候才会被触发。

当然这里我们把left放到点击事件函数里面也可以了，因为当我们添加了判断之后，只有当第一次interval变量为false的时候，才会执行里面的内容，因此left也不会被重复赋值啦。

 let btns = document.querySelector("button");
    let interval = false;
    btns.addEventListener("click", function () {
        let that = this;
        if (!interval) {
            interval = true;
            let left = 0;
            setInterval(function () {
                that.style.left = left++ + 'px'
            }, 100)
        }
    })