闭包的认识

    技术2025-04-25  12

    闭包

    一、什么是闭包

    闭包是指有权访问另一个函数作用域中变量的函数,创建闭包的最常见的方式就是在一个函数内 创建另一个函数,通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域,将函数 内部的变量和方法传递到外部。

    二、闭包的原理

    借助函数的立即执行、参数以及函数的return返回值,多创建了一层作用域。从而实现外部函数 持续性被引用而不能释放内存空间,将值存储下来。

    三、闭包的作用

    闭包就是将函数内部和函数外部连接起来的一座桥梁。使得外部函数可以读取内部函数的变量, 这些变量的值始终保持在内存中,不会被垃圾回收器回收。

    四、闭包如何从外部的作用域读取到内部作用域的东西

    那就是在函数的内部,再定义一个函数。将内部函数传递到所在词法作用域以外

    (一)利用return

    function f1(){     var n=999;     function f2(){       alert(n);     }     return f2;   }   var result=f1();   result(); // 999

    (二)将内部函数作为参数传递出来

    function foo() { var a = 2; function baz(){ console.log(a) //2 } bar(baz); //将内部函数传递给bar } function bar(fn){ fn(); //这里是闭包 }

    五、闭包的优点

    避免全局变量被污染

    方便调用上下文的局部变量 加强封装性

    六、闭包的缺点

    闭包常驻内存,内存消耗很大 可能导致内存泄露

    解决方案:在退出函数之前,将不使用的局部变量全部删除。

    七、实际应用

    (一)给每个li添加点击事件

    var oli = document.getElementsByTagName('li'); var i; for(i = 0;i < 5;i++){ oli[i].onclick = function(){ alert(i); } } console.log(i); // 5

    上面是一个经典的例子,我们都知道执行结果是都弹出5,原因是什么呢?

    for循环中,我们给每个li点击事件绑定了一个匿名函数,匿名函数中返回了变量i的值,当循环结束后,变量i的值变为5,此时我们再去点击每个li,也就是执行相应的匿名函数(看上面的代码),这是变量i已经是5了,所以每个点击弹出5. 因为这里返回的每个匿名函数都是引用了同一个变量i,如果我们新建一个变量保存循环执行时当前的i的值,然后再让匿名函数应用这个变量,最后再返回这个匿名函数,这样就可以达到我们的目的了,这就是运用闭包来实现的!

    应用闭包

    var oli = document.getElementsByTagName('li'); var i; for(i = 0;i < 5;i++){ oli[i].onclick = (function(num){ var a = num; // 为了说明问题 return function(){ alert(a); } })(i) } console.log(i); // 5

    这里for循环执行时,给点击事件绑定的匿名函数传递i后立即执行返回一个内部的匿名函数,因为参数是按值传递的,所以此时形参num保存的就是当前i的值,然后赋值给局部变量 a,然后这个内部的匿名函数一直保存着a的引用,也就是一直保存着当前i的值。 所以循环执行完毕后点击每个li,返回的匿名函数执行弹出各自保存的 a 的引用的值。

    (二)setTimeout的问题

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

    输出结果为5个6,如何修改输出1,2,3,4,5

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

    垃圾回收机制

    找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔周期性 进行这一操作

    两种方法——标记清除和引用计数

    标记清除

    垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记,然后,它会去掉环境中的变量的标记和被环境中的变量引用的变量的标记,此后,如果变量再被标记则表示此变量准备被删除。

    引用计数

    跟踪记录每个值被引用的次数,当声明一个变量并将一个引用类型的值赋给该变量时,这个值的引用次数就是1,如果这个值再被赋值给另一个变量,则引用次数加1。相反,如果一个变量脱离了该值的引用,则该值引用次数减1,当次数为0时,就会等待垃圾收集器的回收。

    内存泄露及解决方法

    闭包创建了循环引用,就是说A对象包含一个指向B的指针,对象B也包含一个指向A的引用。 这就可能造成大量内存得不到回收(内存泄露),因为它们的引用次数永远不可能是 0 。

    这段代码会导致内存泄露

    window.onload = function(){ var el = document.getElementById("id"); el.onclick = function(){ alert(el.id); } }

    解决方法为

    window.onload = function(){ var el = document.getElementById("id"); var id = el.id; //解除循环引用 el.onclick = function(){ alert(id); } el = null; // 将闭包引用的外部函数中活动对象清除 }
    Processed: 0.010, SQL: 9