JavaScript之閉包

xiaotianyi 發(fā)布于2019-08-23 12:34 / 3057人閱讀

摘要：但在作用域鏈中，外部函數(shù)的活動對象始終處于第二位，外部函數(shù)的外部函數(shù)的活動對象始終處于第三位，直至作為作用域鏈重點(diǎn)的全局執(zhí)行環(huán)境。仍然引用中的函數(shù)在執(zhí)行完畢后，其活動對象也不會被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈仍然在引用這個活動對象。

前言：最近在細(xì)讀Javascript高級程序設(shè)計，對于我而言，中文版，書中很多地方翻譯的差強(qiáng)人意，所以用自己所理解的，嘗試解讀下。如有紕漏或錯誤，會非常感謝您的指出。文中絕大部分內(nèi)容引用自《JavaScript高級程序設(shè)計第三版》。

閉包是指有權(quán)訪問另一個作用域中的變量的函數(shù)。

創(chuàng)建閉包的常見方式，就是在一個函數(shù)內(nèi)部創(chuàng)建另外一個函數(shù)。

function createComparisonFunction(propertyName) {

    return function(object1, object2) {

        var value1 = object1[propertyName]; 
        // 注意， return出的匿名函數(shù)訪問了外部函數(shù)中的變量propertyname
        var value2 = object2[propertyName];
        // 注意， return出的匿名函數(shù)訪問了外部函數(shù)中的變量propertyname

        if(value1 < value2) {
            return -1;
        } else if (value > value2) {
            return 1;
        } else {
            return 0;
        }

    }
}

在這個例子中，突出的那兩行代碼是內(nèi)部函數(shù)（一個匿名函數(shù)）中的代碼，這兩行代碼訪問了外部函數(shù)中的變量propertyName。

即使這個內(nèi)部函數(shù)被返回了，而且是在其他地方被調(diào)用了，但它仍然可以訪問變量propertyName。

之所以還能夠訪問這個變量，是因?yàn)閮?nèi)部函數(shù)的作用域鏈中包含createComparisonFunction()的作用域。

當(dāng)某個函數(shù)被調(diào)用時，會創(chuàng)建有一個執(zhí)行環(huán)境（execution context）以及相應(yīng)的作用域鏈。
然后，使用arguments和其他命名參數(shù)的值來初始化函數(shù)的活動對象（activation object)。

但在作用域鏈中，外部函數(shù)的活動對象始終處于第二位，外部函數(shù)的外部函數(shù)的活動對象始終處于第三位，...直至作為作用域鏈重點(diǎn)的全局執(zhí)行環(huán)境。

在函數(shù)執(zhí)行過程中，為讀取和寫入變量的值，就需要在作用鏈中查找變量。

function compare(value1, value2) {
    if(value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

var result = compare(5,10);

以上代碼先定義了compare()函數(shù)，然后又在全局作用中調(diào)用了它。

當(dāng)調(diào)用compare()時，會創(chuàng)建一個包含arguments、value1和value2的活動對象。

全局執(zhí)行環(huán)境的變量對象(包含result和compare)在compare()執(zhí)行環(huán)境的作用鏈中處于第二位。

function compare(value1, value2) {
    if(value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

var result = compare(5,10);

//作用域鏈偽代碼
/*
compare[[scope]] = {
    global variable: {
        result, compare
    }, 
    local variable: {
        arguments: [5, 10],
        value1 : 5,
        value2： 10
    }
}
*/

后臺的每個執(zhí)行環(huán)境都有一個表示變量的對象——變量對象。
全局環(huán)境的變量對象始終存在，而compare()函數(shù)這樣的局部環(huán)境的變量對象，則只在函數(shù)執(zhí)行的過程中存在。

在創(chuàng)建compare()函數(shù)時，會創(chuàng)建一個預(yù)先包含全局變量對象的作用域鏈，這個作用域鏈被保存在內(nèi)部的[[Scope]]屬性中。

當(dāng)調(diào)用compare()函數(shù)時，會為函數(shù)創(chuàng)建一個執(zhí)行環(huán)境，然后通過復(fù)制函數(shù)的[[Scope]]屬性中的對象構(gòu)建起執(zhí)行環(huán)境的作用域鏈。此后，本地活動對象（也可以說是函數(shù)執(zhí)行時，內(nèi)部的變量）被創(chuàng)建并被推入執(zhí)行環(huán)境作用域的前端。

對于函數(shù)的執(zhí)行環(huán)境而言，其作用域鏈中包含兩個變量對象:

1. 本地活動對象。

2. 全局變量對象。

作用域鏈本質(zhì)上是一個指向變量對象的指針列表，它只引用但不包含變量對象。

無論什么時候在函數(shù)中訪問一個變量時，就會從作用域鏈中搜索具有相應(yīng)名字的變量。一般來講，當(dāng)函數(shù)執(zhí)行完畢后，局部活動對象就會被銷毀，內(nèi)存中僅保存全局作用域（全局執(zhí)行環(huán)境的變量對象）。

但是，閉包的情況又有所不同。

在另一個函數(shù)內(nèi)部定義的函數(shù)會將包含函數(shù)（即外部函數(shù)）的活動對象添加到它的作用鏈中。
因此，在createComparisonFunction()函數(shù)內(nèi)部定義的匿名函數(shù)的作用域鏈中，實(shí)際上將會包含外部函數(shù)createComparisonFunction()的活動對象。

function createComparisonFunction(propertyName) {

    return function(object1, object2) {

        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if(value1 < value2) {
            return -1;
        } else if(value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    }

}

// 注意調(diào)用createComparisonFunction的返回值仍然是一個函數(shù)。
var compare = createComparisonFunction("name");
/*
createComparisonFunction[[Scope]] = {
    global Variable: {
        createComparisionFunction
    },
    local Variable: {
        arguments: ["name"],
        propertyName: "name"
    }
}

*/

var result = compare({name: "Nicholas"}, {name:"Greg"});

/*
compare[[Scope]] = {
    global Variable: {
        createComparisonFunction
    },
    local Variable: {
        arguments: [{name: "Nicholas"}, {name:"Greg"}],
        value1: arguments[0][propertyName],
        value2: arguments[1][propertyName]
    }
}

//propertyName仍然引用createComparisonFunction中的propertyName
*/

createComparisonFuncion()函數(shù)在執(zhí)行完畢后，其活動對象也不會被銷毀，因?yàn)槟涿瘮?shù)的作用域鏈仍然在引用這個活動對象。

換句話說，當(dāng)createComparisonFunction()函數(shù)返回后，其執(zhí)行環(huán)境的作用域鏈會被銷毀，但它的活動對象仍然會留在內(nèi)存中；直到匿名函數(shù)被銷毀后，createComparisonFunction()的活動對象想象才會銷毀。

//創(chuàng)建函數(shù)
var compareNames = createComparisonFunction("name");

//調(diào)用函數(shù)
var result = compareNames({name: "Nicolas"}, { name: "Greg"});

//接觸對匿名函數(shù)的引用（以便釋放內(nèi)存），當(dāng)然如果你就是需要使用該變量，那么就不用釋放了，也要看情況的。
compareNames = null;

由于閉包會攜帶包含它的函數(shù)的作用域，因此會比其他函數(shù)占用更多的內(nèi)存。過度使用閉包可能會導(dǎo)致內(nèi)存占用過多，因此建議只在絕對必要時再考慮使用閉包。雖然像V8等優(yōu)化后的JavaScript引擎會嘗試回收被閉包占用的內(nèi)存，但是還是要慎重的使用閉包。