JavaScript的闭包

JavaScript的闭包

首先看一个函数

function outer(){
    var x = 0;
    var y = 9;
    function inner(){
        x++;
        console.log(x);
        // console.log(123);
    }
    // inner();
    return inner;
}
inner();
var fn = outer();
fn();//9
fn();//10
fn();//11
fn();//12

连续调用四次，正常情况下函数内的变量会在函数调用结束后删除，也就是输出4个9，但在这里，JavaScript触发了闭包
闭包发生条件

• 函数嵌套，内部函数访问外部函数变量
• 在外层函数外部引用内部函数并调用

也就是当一个函数能够记住并访问到所在词法作用域及作用域链，特别强调是在其定义的作用域访问，此时函数和其上层执行上下文共同构成闭包
需要明确的几点：

1. 闭包一定是函数对象
2. 函数内保持对上层作用域的引用 *
3. 闭包和词法作用域、作用域链、垃圾回收机制等息息相关
4. 当函数在其定义的作用域外保持引用并进行访问时，才产生闭包 *
5. 闭包是由该函数和其上层执行上下文共同构成 *

闭包实际作用：

1. 在函数外读取函数内部的变量；
2. 让局部变量的值能够被保存下来；

for (var i = 0, len = lis.length; i < len; i++){
    (function (x){
        // x 
        lis[x].onclick = function (){
            console.log(x);
        }
    })(i);
}

事件驱动的匿名函数可以看做是全局引用的，函数内部访问上层函数x，自执行函数结束不删除x

3. 将模块的公有属性和方法暴露出来。

var loadModule = (function (){
    var showImg = new Image();
    var loadImg = new Image();
    loadImg.onload = function (){
        showImg.src = this.src;
    }
    return {
        setSrc: function (dom,src){
            showImg.src = 'loading.gif';
            loadImg.src = src;
            dom.appendChild(showImg);
        }
    }
})();
loadModule.setSrc();

外部引用且调用，setSrc函数内访问外层函数的变量