JavaScript之闭包

闭包学习

---

记录后盾人JavaScript闭包的学习过程，以便后续复习。

资料：

深入理解作用域和闭包 - 掘金 (juejin.cn)

第九章 这次把JS闭包给你讲得明明白白_哔哩哔哩_bilibili

语法环境和作用域

---

语法环境

深入理解JavaScript-词法环境

在我看来环境就是用来包裹用的，一个范围，比如说一个小镇，这就是一个环境，里面包含了各种环境和变量。函数也是一个环境。

作用域

元素的最用范围就是作用域。

变量的作用范围就是包裹它环境的范围。

<script>
        let num = 1;
        function say() {
            let x = 0;
        }
        console.log(x);// 报错
</script>

通过上述的代码我们可以看到，num是在全局环境中的，所以它的作用域是全局的，而x是在say()函数里面的，所以它的作用域只用在say()函数里面，所以在默认情况下外环境无法访问它。

对于say()函数来说，调用一次函数在其父环境创建一次它自己的环境（不调用就不会创建），再次调用会创建一个新的环境，与同一个函数旧的环境是不相同。当环境不用的时候就会被删除

对于下面的代码来说：

    <script>
        let num = 1;
        function say() {
            let x = 0;
            function fn(){
                let y = 0;
            }
            fn();
            fn();
        }
        say();
        console.log(x);// 报错
    </script>

这种情况下，第一次的fn()环境会被删除，因为永远不会被用到了。

延伸函数环境的生命周期

---

其实就是里面的变量后面需要被用到，那么他就不会把这函数环境删除。

<script>
        let num = 1;
        function say() {
            let x = 0;
            return function(){// 返回的一个函数，里面包含着x变量，所以环境不会被删除
                console.log(++x);
            }
        }
        let fn = say();
        let fnn = say();
        fn();//1
        fn();//2
        fn();//3
        fn();//4
        fn();//5
        fnn();//1, 这里就可以看出，他是创建了一个新的say()环境.
</script>

上述代码输出的结果时1，因为在返回的函数中x是要被用的，那么say() 环境（而不只是里面的x不被删除）就不会被删除。

分析下述代码的结果

 <script>
        function hd() {
            let n = 1;
            return function sum() {
                let m = 1;
                function show() {
                    console.log(++m);
                }
                show();
            }
        }   
        let x = hd();
        x();   //2  
        x();    //2
    </script>

这是因为运行的x() 创建了两个show() 环境，他们是不同的，而且没有延长变量。如果想要延长m的作用范围，则这样

    <script>
        function hd() {
            let n = 1;
            return function sum() {
                let m = 1;
                return function () { // 这里就保持的对m的引用
                    console.log(++m);
                }
                show();
            }
        }   
        let x = hd()();
        x();   //2  
        x();    //3
    </script>

构造函数中作用域的使用形态

构造函数new的过程

可能有错误

• 创建一个空对象，将它的引用赋给 this，继承函数的原型。
• 通过 this 将属性和方法添加至这个对象
• 最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象）

(1) 创建一个新对象；
(2) 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象)；
(3) 执行构造函数中的代码（为这个新对象添加属性，要有this的） ；
(4) 返回新对象(this)。

构造函数的形态

/*function Hd(){
    let n = 1;
    this.sum = function () {
        console.log(++n);
    }; 
}*/
// 它的形态是这样的,其实也就是new的过程。
function Hd(){
    let n = 1;
    function sum() {
        console.log(++n);
    }; 
    return {
        sum:sum
    }
}
let a = new Hd();
let b = new Hd();
console.log(a.sum());//2
console.log(a.sum());//3
console.log(b.sum());//2 // 一样会独立创建

可以看到，它其实还是返回了一个对象，里面需要用到n，所以变量延伸了。

块级作用域

let const 这两个才有块级作用域。

块级作用域就是{}

但是对于var 它的作用域是相对于函数的。（单独的{}不是函数）。

let-const-var 在for中的执行原理

var

var的作用域是相对于函数的，但是for循环并不是一个函数，而是一个块，所以在全局环境中的for循环中的var的作用域全局的。下面的代码完美的体现出了这一点。

for (var i=1; i<= 3;i++){
    console.log(i);
}
console.log(i);// 4
console.log(window.i);// 4, 这里也可以看出是全局的

可以看到for循环执行时，创建了4个for块级作用域，但是var是在全局的，所以没用。

在定义事件时使用var来循环定义也容易出问题。

let

let的作用域是块级的。

for (let i=1; i<= 3;i++){
    console.log(i);
}
console.log(i);// 没有次变量

每执行一次循环，就为他创建了一个块级作用域，i=4的时候也创建了，只不过不会执行循环里面的语句。

在for里面使用var 和 let 情况是，定时器区别尤为明显。

模拟出var的伪块级作用域

其实就是用到了立即执行函数

for (var i=1; i<= 3;i++){
    (function (a){
        setTimeout(function () {
            console.log(a);
        },1000)
    })(i)
}

因为setTimeout函数会过一会儿在执行（具体的看JavaScript的异步），那么那个立即执行函数的环境会被保留。

这就可以模拟出块级作用域。

函数作用域多级嵌套

let arr = [];
for (var i=1;i<=3;i++){
    arr.push(function() {
        return i;
    })
}
console.log(arr[0]());//4

上述代码虽然会保留每一个for循环块级作用域，但是在里面并没有i, 定义在了全局作用域，所以输出的4。

可以通过使用let 或者 立即执行函数来解决

let arr = [];
for (var i=1;i<=3;i++){
    (function (i){
        arr.push(function() {
        return i;
    })
    })(i)
}
console.log(arr[0]());//1 

闭包

在之前的代码中其实已经使用过很多的闭包了。

闭包就是函数能够使用其它函数中的局部变量，这就是闭包。

其实就是是函数环境保留下来。上述的使用立即执行函数传参也是使用的闭包。

返回一个函数，并使用一个外部变量，这也形成的闭包。所以闭包就是要保留环境。

使用闭包获取数组指定区间

Array.prototype.filter() - JavaScript | MDN (mozilla.org)

let arr = [1,23,4,5,6,7,8,9,21,10];
/*let hd = arr.filter(function(v) {
    return v >=2 && v <= 9;
})
let hd = arr.filter(function(v) {
    return v >=5 && v <= 8;
})*/
// 上面两个基本一样，只不过改变了里面的范围，那么怎么复用呢？
function between(a,b){
    console.log(1);// 只输出一次，说明只调用了一次
    return function(v){
        console.log(2);// 输出了很多次。
        return v>=a && v<=b;
    }
}
console.log(arr.filter(between(3,9)));// 会先执行between(3,9),然后返回一个filter需要的回调函数传入filter函数。（多理解）

// 下面是我对filter的理解，里面有一个回调函数，在使用filter时，传入回调函数，因为是Array对象，是可以获得数组的所有值的，然后对每一个值进行回调函数的判断。

移动动画闭包的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<!-- 在学习笔记文件里面 -->
<body>
    <button>123</button>
    <script>
        let f = true;
        let btn = document.querySelector('button');
        // 也可以let left = 0; 放在这里，这是如果不清楚定时器或设置flag，那么点击会越来越快。
        btn.addEventListener('click',function (){
            if(!f){ // 防止多次点击出现抽搐的现象。如果不加这个，那么每点击一次，就回生成一个新的环境，里面的left = 0，那么就回出现抽象现象（一个定时器left不为0，新开的一个是从0开始的）
                return;
            }
            f = false;
            let left = 0;// 这里就产生了闭包，其实b把这个声明放在定时器里面是最好的，这个就可以使用清理定时器的方法来防抖了。要不然就算清理了定时器，left也还是0开始。
            //
            setInterval(()=>{
                this.style.left = ++left + 'px';
            },5)
        })
    </script>
</body>
</html>

数组的排序也可以和filter一样使用闭包

function order(property，type = 'asc'){// js的默认参数
    return function(a, b){// 排序的回调函数
        if(type === 'asc'){
            return a[property] - b[property];
        }else if (type === 'desc'){
			return b[property] - a[property];
        }
        
    }
}

闭包内存泄漏的解决方法

闭包的缺点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。

内存泄漏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<!-- 在学习笔记文件里面 -->
<body>  
    <div class="123">123</div>
    <div class="321">321</div>
    <script>
        let divs = document.querySelectorAll('div');
        divs.forEach(function(item){// 虽然说divs是伪数组，但是他有foreach方法
            item.addEventListener('click',function(){
                console.log(item.classList);
            })
        })
    </script>
</body>
</html>

在上述代码中我们可以看到，item在foreach一直会存在，这是一个对象，会占用大量的空间，完全是在浪费空间，而我们只想打印item的类，所以我们可以这样做。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<!-- 在学习笔记文件里面 -->
<body>  
    <div class="123">123</div>
    <div class="321">321</div>
    <script>
        let divs = document.querySelectorAll('div');
        divs.forEach(function(item){// 虽然说divs是伪数组，但是他有foreach方法
            let Class = item.classList;
            item.addEventListener('click',function(){
                console.log(Class);
            })
            item = null;//js是按值传递的，不会改变原来的对象,将其设置为null，就清空了对象
        })
        console.log(divs);
    </script>
</body>
</html>

函数柯里化

以后补充。。。

闭包的历史遗留问题

this在闭包中是当前调用者函数的对象。

 let obj = {
            name: '123',
            get: function (){
                return function(){
                    console.log(this.name);
                }
            }
        }
        let x = obj.get();
        x();// undefined，window调用函数，在全局环境下，没有name。

解决方法：

1. 加一个that

let obj = {
            name: '123',
            get: function (){
                let that = this;
                return function(){
                    console.log(that.name);
                }
            }
        }
let x = obj.get();
 x();// 123

2. 使用箭头函数

箭头函数 - JavaScript | MDN (mozilla.org)

let obj = {
            name: '123',
            get: function (){
                return ()=>{
                    console.log(this.name);
                }
            }
        }
let x = obj.get();
x();// undefined

一道sb的代码分析题（希望有一天能搞懂）

        {
            function foo() {
                console.log(1111);
            }
            foo(); // 2222
            foo = 1;
            // 报错：此时foo的值已经是1了，而并非一个函数
            // console.log(foo());
            function foo() {
                console.log(2222);
            }
            f = 2;
            console.log(foo, '       2'); // 2
        }
        console.log(foo, '     1'); // 1, 这里为什么是1