快捷導(dǎo)航

理解Javascript閉包

更新時間：2013年11月01日 11:09:56 作者：

閉包是ECMAScript一個很重要的特征，但是卻很難用合適的定義來描述它。雖然閉包很難清晰地描述，但是，卻很容易創(chuàng)建，或者說，不小心創(chuàng)建。然而，閉包的存在其實是有一定的潛在問題的。為了避免“不小心”地創(chuàng)建閉包，以及更好地利用閉包的優(yōu)點，有必要理解閉包的機(jī)制

閉包是ECMAScript一個很重要的特征，但是卻很難用合適的定義來描述它。雖然閉包很難清晰地描述，但是，卻很容易創(chuàng)建，或者說，不小心創(chuàng)建。然而，閉包的存在其實是有一定的潛在問題的。為了避免“不小心”地創(chuàng)建閉包，以及更好地利用閉包的優(yōu)點，有必要理解閉包的機(jī)制。

閉包的定義

關(guān)于閉包，有太多的定義，特別是有一些定義非常抽象，象這個：

A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables.

大致是說閉包是一個表達(dá)式，擁有一些自由變量及綁定這些變量的執(zhí)行環(huán)境。這種定義太書面化，反而難以理解。

還有另一個定義：
所有函數(shù)都是閉包。這個定義給我很大的迷惑，換句話說，由于Javascript沒有塊級作用域，因此閉包一般指的是函數(shù)（想不出除了函數(shù)以外還有哪些方式可以構(gòu)成閉包）。

這里不想太多討論函數(shù)與閉包的關(guān)系，下面給出我認(rèn)為比較容易理解的定義吧。

首先，閉包的存在是基于作用域鏈。由于作用域鏈的機(jī)制，所有函數(shù)（即使全局函數(shù)）都能引用上下文執(zhí)行環(huán)境中的變量（即free variables）。

其次，閉包內(nèi)部必須有free variables。順便說下兩種變量1. Local variables (bound variables) 2. Non-local variables (free variables)

最后，在其上下文環(huán)境結(jié)束后仍然存在。即內(nèi)部函數(shù)擁有比它的外部函數(shù)更長的生命周期。

關(guān)于閉包定義的解析

關(guān)于閉包定義的兩點，一直在考慮是不是必須同時滿足。

首先，如果閉包內(nèi)部沒有free variables，即是說它沒有訪問外部的變量，那么就失去了閉包的意義。（除非通過其他閉包改變了行為）因此，我認(rèn)為free variables是必要條件。

其次，如果函數(shù)內(nèi)部存在free variables，但是當(dāng)其上下文環(huán)境銷毀后，它也跟著銷毀?？梢韵胂髢?nèi)部函數(shù)，雖然訪問了其外部函數(shù)變量，但是當(dāng)外部函數(shù)執(zhí)行完后也隨之回收。這種情況下，閉包的討論也沒有意義。

來看兩個例子：

復(fù)制代碼代碼如下:

var objectA = (function() {
        var localA = "localA";

        innerFn();
              // 單純的內(nèi)部函數(shù)調(diào)用
        function innerFn() {
            localA = "innerChange";
        }

        return {
            getLocalA : function() {
                return "empty";
            }
        };
    })();

    objectA.getLocalA();

    objectA.getLocalA = function() {
        return localA;
    };

    //console.log(objectA.getLocalA()); //error: localA is not defined

 
    var objectB = (function() {
        var localB = "localB";

        return {
            getLocalB : function() {
                return "empty";
            },

            updateGetLocalB : function() {
                this.getLocalB = function() {
                    return localB;
                };
            },

            updateLocalB : function() {
                localB = "changeLocalB";
            }
        };
    })();

    console.log(objectB.getLocalB()); // empty
       // 通過其他閉包改變
    objectB.updateGetLocalB();

    console.log(objectB.getLocalB()); // localB

    objectB.updateLocalB();

    console.log(objectB.getLocalB()); // changeLocalB