摘要：閉包，獲取一個(gè)局部作用域里變量的訪問權(quán)限，涉及到作用域棧執(zhí)行上下文垃圾回收機(jī)制內(nèi)存駐留以及性能問題，閉包切斷作用域棧產(chǎn)生的垃圾回收事件，實(shí)現(xiàn)變量的內(nèi)存駐留。因而，為避免產(chǎn)生嚴(yán)重的性能問題，在完成事件任務(wù)后要把閉包置為，釋放內(nèi)存。

閉包，獲取一個(gè)局部作用域里變量的訪問權(quán)限，涉及到作用域棧、執(zhí)行上下文、垃圾回收機(jī)制、內(nèi)存駐留以及性能問題，閉包切斷作用域棧產(chǎn)生的垃圾回收事件，實(shí)現(xiàn)變量的內(nèi)存駐留。主要應(yīng)用場(chǎng)景在需要累積效應(yīng)、重復(fù)循環(huán)事件、前后事件相關(guān)等。因而，為避免產(chǎn)生嚴(yán)重的性能問題，在完成事件任務(wù)后要把閉包置為null，釋放內(nèi)存。

這里介紹JS中作用域棧的特性，即先進(jìn)后出，全局作用域位于棧底，局部作用域按照編譯、執(zhí)行順序依次入棧，執(zhí)行完畢依次出棧，對(duì)變量進(jìn)行垃圾回收，釋放內(nèi)存。了解此特性，利用全局作用域始終位于棧底，并且總是最后完成垃圾回收，只要在局部作用域中裝載具有全局效應(yīng)的作用域，阻斷垃圾回收，就完成了閉包的設(shè)計(jì)。

示例1

function foo(x) {
    var tmp = 3;
    return function (y) {
        console.log(x + y + tmp);
        x.memb = x.memb ? x.memb + 1 : 1;
        console.log(x.memb);
    }
}
var age = new Number(2);
var bar = foo(age); // bar 現(xiàn)在是一個(gè)引用了age的閉包
bar(10);

示例2

function foo(x) {
    var temp = 3;
    return function (y) {
        console.log(x + y + (++temp));
    }
}
var bar = foo(2);
bar(10);

示例3

function badClosureExample() {
    var as = document.querySelectorAll("a");
    for (var i = 0; i < 4; i++) {
        as[i].onclick = new popNum(i);
        function popNum(oNum) {
            return function () {
                alert("單擊第" + oNum + "個(gè)");
            }
        }
    }
}
badClosureExample();

示例4

 function badClosureExample() {
    var as = document.querySelectorAll("a");
    for (var i = 0; i < 4; i++) {
        (function (i) {
            as[i].onclick = function () {
                alert("單擊第" + i + "個(gè)");
            }
        })(i);
    }
}
badClosureExample();

1、將變量 i 保存給在每個(gè)段落對(duì)象(p)上

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].i = i;
        pAry[i].onclick = function () {
            alert(this.i);
        }
    }
}
init();

2、將變量 i 保存在匿名函數(shù)自身

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        (pAry[i].onclick = function () {
            alert(arguments.callee.i);
        }).i = i;
    }
}
init();

3、加一層閉包，i 以函數(shù)參數(shù)形式傳遞給內(nèi)層函數(shù)

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        (function (i) {
            pAry[i].onclick = function () {
                alert(i);
            }
        })(i);//調(diào)用時(shí)參數(shù)
    }
}
init();

4、加一層閉包，i 以局部變量形式傳遞給內(nèi)層函數(shù)

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        (function () {
            var index = i;//調(diào)用時(shí)局部變量
            pAry[i].onclick = function () {
                alert(index);
            }
        })();
    }
}
init();

5、加一層閉包，返回一個(gè)函數(shù)作為響應(yīng)事件(注意與3的細(xì)微區(qū)別)

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick = function (i) {
            return function () { //返回一個(gè)函數(shù)
                alert(i);
            }
        }(i)
    }
}
init();

6、用Function實(shí)現(xiàn)，實(shí)際上每產(chǎn)生一個(gè)函數(shù)實(shí)例就會(huì)產(chǎn)生一個(gè)閉包

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick = new Function("alert(" + i + ")");
        //new一次就產(chǎn)生一個(gè)函數(shù)實(shí)例
    }
}
init();

7、用Function實(shí)現(xiàn)，注意與6的區(qū)別

function init() {
    var pAry = document.getElementsByTagName("p");
    for (var i = 0; i < pAry.length; i++) {
        pAry[i].onclick =Function("alert(" + i + ")");
    }
}
init();

示例5

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function () {
        return function () {
            return this.name;
        };
    }
};
alert(object.getNameFunc()()); //The Window

示例6

function outerFun() {
    var a = 0;

    function innerFun() {
        a++;
        alert(a);
    }

    return innerFun; //注意這里
}
var obj = outerFun();
obj(); //結(jié)果為1
obj(); //結(jié)果為2