js闭包深入浅出

是糖果哟

已于 2022-09-07 21:57:54 修改

阅读量312

点赞数 1

文章标签： javascript 前端

于 2022-09-07 21:48:49 首次发布

本文链接：https://blog.csdn.net/g__zq__/article/details/126753654

版权

理解：

从作用域的访问规则定义的：

当一个函数作用域包裹一个作用域，内层访问外层变量

从语法角度定义：

1.嵌套函数，内层函数return

2.嵌套函数，内层函数被返回出去，外部访问内层变量

3.再一个函数内部定义一个函数，内部函数一致保持对外部函数作用用于的访问。

4.能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

优点：

可以重复使用变量，并且不会造成变量污染

全局变量可以重复使用，但是容易造成变量污染。局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。闭包结合了全局变量和局部变量的优点。

可以用来定义私有属性和私有方法。

eg：

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
        return bar;
}
var baz = foo();
baz();//2 这就是闭包的效果

缺点：

比普通函数更占用内存，会导致网页性能变差，在IE下容易造成内存泄露。

什么是内存泄漏

首先，需要了解浏览器自身的内存回收机制。
每个浏览器会有自己的一套回收机制，当分配出去的内存不使用的时候便会回收；内存泄露的根本原因就是你的代码中分配了一些‘顽固的’内存，浏览器无法进行回收，如果这些’顽固的’内存还在一直不停地分配就会导致后面所用内存不足，造成泄露。

闭包造成内存泄漏

因为闭包就是能够访问外部函数变量的一个函数，而函数是必须保存在内存中的对象，所以位于函数执行上下文中的所有变量也需要保存在内存中，这样就不会被回收，如果一旦循环引用或创建闭包，就会占据大量内存，可能会引起内存泄漏

内存泄漏的解决方案

造成内存泄露的原因：

意外的全局变量(在函数内部没有使用var进行声明的变量)
console.log
闭包
对象的循环引用
未清除的计时器
DOM泄露(获取到DOM节点之后，将DOM节点删除，但是没有手动释放变量，拿对应的DOM节点在变量中还可以访问到，就会造成泄露)

如何避免闭包引起的内存泄漏：

使用标记清除法：

var bar = foo();
bar();
bar();
bar();
setTimeout(() => {
    // 标记清除法
    // 垃圾回收机制会检测到bar---> 不引用内部函数了，也就说,bar中的变量 一定不会被使用了.所以变量就会销毁,从而释放空间
    bar = null;
}, 5000)

使用立即执行函数或es6let：

立即执行函数会形成一个单独的作用域，我们可以封装一些临时变量或者局部变量，避免污染全局变量

<body>
    <h1>hello word</h1>
    <h1>hello word</h1>
    <h1>hello word</h1>
<script>
    let h1s = document.querySelectorAll('h1');
    for (var i = 0; i < h1s.length; i++) {
        h1s[i].onclick = function () {
        console.log(h1s[i]);
        console.log(i);//bug 浏览器执行结果为3
        h1s[i].style.color = 'red'//无论点击哪一个都不会变色
        }
    }



    //正确写法一：
    for (var i = 0; i < h1s.length; i++) {
    // 合理开发程序，不会导致内存泄漏
    /*使用立即执行函数可以用立即执行函数，给每个i创建一个独立的作用域,在立即执行函数执行的时        
      候，i的值从0到2，对应三个立即执行函数，这3个立即执行函数里边的i分别是0，1，2所以就能正常 
     输出了*/
        (function (i) {
            h1s[i].onclick = function () {
            console.log(h1s[i]);
            console.log(i);
            h1s[i].style.color = 'red'
            }
        })(i)
    }

    //正确写法二：
    let h1s = document.querySelectorAll('h1');
    for (let i = 0; i < h1s.length; i++) {
        h1s[i].onclick = function () {
        console.log(h1s[i]);
        console.log(i);//bug 浏览器执行结果为3
        h1s[i].style.color = 'red'//无论点击哪一个都不会变色
        }
    }
</script>
</body>