JavaScript中的闭包（closure）

时间：2020-12-08 22:47:21

闭包的特性

1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收

 闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露，主要用于私有的方法和变量

Javascript的垃圾回收原理

基本上所有语言自动内存管理，用的都是引用计数了

1、在javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收；
2、如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。

 闭包的好处

1.希望一个变量长期驻扎在内存中
2.避免全局变量的污染
3.私有成员的存在

 1、变量的累加，常驻内存

示例一

var a = 1;
function abc(){
        a++;
        alert(a);
}
abc();              //2
abc();            //3

示例二

function abc(){
        var a = 1;
        a++;
        alert(a);
}
abc();                       //2
abc();                    //2

 那么怎么才能做到变量a既是局部变量又可以累加呢？

function outer(){
        var x=10;
        return function(){             //函数嵌套函数
                x++;
                alert(x);
        }
}
var y = outer();              //外部函数赋给变量y;
y();                 //y函数调用一次，结果为11，相当于outer()()；
y();                //y函数调用第二次，结果为12，实现了累加

 2、模块化代码，减少全局变量的污染

var abc = (function(){      //abc为外部匿名函数的返回值
        var a = 1;
        return function(){
                a++;
                alert(a);
        }
})();
abc();    //2 ；调用一次abc函数，其实是调用里面内部函数的返回值    
abc();    //3

 3、私有成员的存在

var aaa = (function(){
        var a = 1;
        function bbb(){
                a++;
                alert(a);
        }
        function ccc(){
                a++;
                alert(a);
        }
        return {
                b:bbb,             //json结构
                c:ccc
        }
})();
aaa.b();     //2
aaa.c()      //3

 4、内存泄露问题

由于IE的js对象和DOM对象使用不同的垃圾收集方法，因此闭包在IE中会导致内存泄露问题，也就是无法销毁驻留在内存中的元素

function closure(){
    var oDiv = document.getElementById('oDiv');//oDiv用完之后一直驻留在内存中
    oDiv.onclick = function () {
        alert('oDiv.innerHTML');//这里用oDiv导致内存泄露
    };
}
closure();
//最后应将oDiv解除引用来避免内存泄露
function closure(){
    var oDiv = document.getElementById('oDiv');
    var test = oDiv.innerHTML;
    oDiv.onclick = function () {
        alert(test);
    };
    oDiv = null;
}

 5、闭包引起的误解 http://segmentfault.com/q/1010000003490094 原文地址

错误的写法

for(var i = 0; i < 10; i++) {
    setTimeout(function() {
        console.log(i);  
    }, 1000);
} // 9 10次

 正确的写法1

for(var i = 0; i < 10; i++) {
    (function(e) {
        setTimeout(function() {
            console.log(e);  
        }, 1000);
    })(i);
}

 正确的写法2

for(var i = 0; i < 10; i++) {
    setTimeout((function(e) {
        return function() {
            console.log(e);
        }
    })(i), 1000)
}

 正确的写法3

for(var i = 0; i < 10; i++) {
    setTimeout(function(e) {
        console.log(e);  
    }, 1000, i);
}

 正确的写法4 Some legacy JS environments (Internet Explorer 9 & below) do not support this.

for(var i = 0; i < 10; i++) {
    setTimeout(console.log.bind(console, i), 1000);
}

正确的写法5 当然在ES3/5下除了通过IIFE构造作用域外，还可以通过with来构造

for(var i = 0; i < 10; ++i) with({i:i}){
   setTimeout(function(){console.log(i)}, 1000)
}

正确的写法6 使用let表示变量作用域

for(let i = 0; i < 10; ++i){
  setTimeout(function(){console.log(i)}, 1000)
}

解决这个问题的关键：弄清楚每种写法的作用域链

最开始的写法 for =》作用域A，setTimeout=》作用域B，闭包的存在是得外部代码执行完毕，其任然驻留在内存中，代码块B在执行时，找不到变量i，于是沿着作用域链向上找，取到A作用域中i的值，此时内存中i值为10

for(var i = 0; i < 10; i++) { // 作用域A，存储i的值

    setTimeout(function() {//作用域B
        console.log(i);  
    }, 1000);
}

 而正确的写法

for(var i = 0; i < 10; i++) { //作用域A，存储i

(function(e) {   //作用域B0,存储e0 作用域B1，存储e1,每循环一次，都有一个单独的作用域
    setTimeout(function() {//作用域C0,C1，C2，... 对应外部作用域B0,B1...
        console.log(e);  
      }, 1000);
    })(i);
}

 

参考地址

http://segmentfault.com/q/1010000003490094

 

标签：

相关文章