攻城狮-web

闭包

发表于 | 分类于 |

闭包


闭包就是能够读取其他函数内部变量的函数，闭包就是将函数内部函数外部连接起来的一座桥梁
它的最大用处两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中


1
2
3
4
5
6
7
8
9
10
11
12
function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
result(); // 1000

代码中的result就是闭包f2函数，它一共运行了2次，第一次是999，第二次是1000，说明了函数f1中的局部变量一直保存在内存中，并没有在f1调用的时候清除，原因在于f1是f2的父函数，而f2被赋给了一个全局变量，导致f2始终在内存中，f2依赖于f1，因此f1也始终在内存中，不会在调用结束后被垃圾回收机制回收(garbage collection)

使用闭包的注意点

  • 由于闭包会使得函数中变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除
  • 闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

    闭包的其他解释

    闭包—有权访问另一个函数作用域中的变量的函数
    方式：一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量
    三个特性:
  • 函数嵌套函数
  • 函数内部可以引用外部的参数和变量
  • 参数和变量不会被垃圾回收机制处理
    垃圾回收机制
  • JS中的一个对象不再被引用，那么这个对象就会被垃圾回收(garbage collection)
  • JS中两个对象互相引用，而不被第三者引用，那么这两个对象就会被回收
    内存泄露
  • 是指一块呗分配的内存既不能被调用也不能被使用，又不能被回收，直到浏览器进程结束
    内存泄露的条件
  • 外部引用内部，内部引用外部
    1
    2
    3
    btn.onclick = function(){
                    alert(btn.id)
           }

/btn引用了一个匿名函数，btn释放之前这个匿名函数是不会被释放的，匿名函数释放的时间
在匿名函数内部，又引用btn,形成了一个环式引用，谁都释放不了，会造成内存泄露 /

以上问题解决方案


1
2
3
4
btn.onclick = function(){
    alert(btn.id)
    }
btn = null; //手动释放内存

闭包案例

1
2
var son = father()
son();

father()函数被赋值给了全局变量son,而全局变量的生命周期是在浏览器关闭的时候结束
son引用father,所以father函数一直在内存中不会被回收

案例继续

1
2
3
4
5
6
function sum(){
    var i = 0;
    i++;
    console.log(i);
    }
    sum();
1
2
3
4
5
6
7
8
9
10
11
12
13
function sum(){
    var i = 0;
    function sumList(){
        i++;
        console.log(i)
        }
        return sumList
    }
    var add = sum();
    add() //1
    add() //2
    add() //3

等待for循环结束后才继续setTimeout的执行，并不是在一开始就在1000ms执行

1
2
3
4
5
for(var i = 0;i<10;i++){
    setTimeout(function(){
        console.log(i)
        },1000)
    }

使用闭包的形式将for循环的i留在内存中

1
2
3
4
5
6
7
8
for(var i = 0;i<10;i++){
    var a = function(e){
        return function(){
            console.log(e)
            }
        }
        setTimeout(a[i],0)
    }

js中有函数作用域,但是没有块级作用域(ES5以前),所以通过()()模拟块级作用域

1
2
3
4
5
6
7
8
for(var i = 0;i<10;i++){
    function(){
        setTimeout(function(e)
        {
            console.log(e)
            },0)
        }(i)
    }