javascript 闭包

javascript 闭包

---

定义

当一个函数即便在离开了它的词法作用域(Lexical Scope)的情况下，仍然存储并可以存取它的词法作用域(Lexical Scope)，这个函数就构成了闭包。

function Student(){
var age=22;
function  addAge(){
    age++;
    alert(age);
 }
}
return addAge;
var fn=Student();
fn();//弹出23

特性

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

function outer() {
    var local_var = "I'm local"; //不会被立刻回收
    return function inner() { //闭包函数
        console.log("local: " + local_var);
    }; 
}

JS 闭包的实例讲解

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

这个例子相信大家再熟悉不过了，首先timer（）形成闭包函数。直觉上都会认为输出为1，2，3，4，5。很明显这个结论是错误，实际结果为6，6，6，6，6。
首先是js执行为单线程，所以当循环执行完之后才会开始执行setTimeout函数。所以最后执行的时候i已经变成6了，可能有人会问，每一个闭包不应该都会有自己的一份拷贝吗？恭喜你，你的理解是对的，但这个方法却没有这样做，它都是调用了i这个变量，也就是说没有保存自己的那一个i。那么问题也就好解决了，我们给它传一个属于自己i

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

也可以使用let 解决这个问题

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

因为let块级作用域，当前的i只在本轮循环有效
var 没有块级作用域，var的i在全局范围内有效，所以全局只有一个变量i，每一次循环，变量i的值都会发生改变

闭包的好处

希望一个变量长期存储在内存中。
避免全局变量的污染。
私有成员的存在。

闭包的缺点

常驻内存，增加内存使用量。
使用不当会很容易造成内存泄露。

闭包常见用法

单例模式

var Singleton = (function () {
    var instance;
    function createInstance() {
        return new Object("I am the instance");
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
function run() {
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
    console.log("Same instance? " + (instance1 === instance2));  
}

代码模块化（闭包模拟私有方法）

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }

    function doAnother() {
        console.log( another.join( " ! " ) );
    }

    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}
var foo = CoolModule();
foo.doSomething(); // coolf
oo.doAnother(); // 1 ! 2 ! 3

对象与方法关联

我们常见的做法就是，响应事件然后执行的函数，但如果需要改变大小的样式有很多，比如12px一个按钮，14px一个按钮，16px一个按钮，如果以前的方式来写就很麻烦，而闭包可以为我们提供便利

function makeSizer(size){ 
     return function() {
       document.body.style.fontSize = size + 'px';
    };
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;