簡介 Closure 所謂“閉包”，指的是一個擁有許多變量和綁定了這些變量的環境的表達式（通常是一個函數），因而這些變量也是該表達式的一部分。 閉包是 ECMAScript （JavaScript）最強大的特性之一，但用好閉包的前提是必須理解閉包。閉包的創建相對容易，人們甚至會在不經意間創建閉包，但這些無意創建的閉包卻存在潛在的危害，尤其是在比較常見的瀏覽器環境下。如果想要揚長避短地使用閉包這一特性，則必須了解它們的工作機制。而閉包工作機制的實現很大程度上有賴于標識符（或者說對象屬性）解析過程中作用域的角色。關于閉包，最簡單的描述就是 ECMAScript 允許使用內部函數－－即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。當其中一個這樣的內部函數在包含它們的外部函數之外被調用時，就會形成閉包。也就是說，內部函數會在外部函數返回后被執行。而當這個內部函數執行時，它仍然必需訪問其外部函數的局部變量、參數以及其他內部函數。這些局部變量、參數和函數聲明（最初時）的值是外部函數返回時的值，但也會受到內部函數的影響。遺憾的是，要適當地理解閉包就必須理解閉包背后運行的機制，以及許多相關的技術細節。雖然本文的前半部分并沒有涉及 ECMA 262 規范指定的某些算法，但仍然有許多無法回避或簡化的內容。對于個別熟悉對象屬性名解析的人來說，可以跳過相關的內容，但是除非你對閉包也非常熟悉，否則最好是不要跳過下面幾節。對象屬性名解析 ECMAScript 認可兩類對象：原生（Native）對象和宿主（Host）對象，其中宿主對象包含一個被稱為內置對象的原生對象的子類（ECMA 262 3rd Ed Section 4.3）。原生對象屬于語言，而宿主對象由環境提供，比如說可能是文檔對象、DOM 等類似的對象。原生對象具有松散和動態的命名屬性（對于某些實現的內置對象子類別而言，動態性是受限的－－但這不是太大的問題）。對象的命名屬性用于保存值，該值可以是指向另一個對象（Objects）的引用（在這個意義上說，函數也是對象），也可以是一些基本的數據類型，比如：String、Number、Boolean、Null 或 Undefined。其中比較特殊的是 Undefined 類型，因為可以給對象的屬性指定一個 Undefined 類型的值，而不會刪除對象的相應屬性。而且，該屬性只是保存著 undefined 值。下面簡要介紹一下如何設置和讀取對象的屬性值，并最大程度地體現相應的內部細節。值的賦予 對象的命名屬性可以通過為該命名屬性賦值來創建，或重新賦值。即，對于：var objectRef = new Object(); //創建一個普通的 javascript 對象。 可以通過下面語句來創建名為 “testNumber” 的屬性：objectRef.testNumber = 5; /* - 或- */ objectRef["testNumber"] = 5; 在賦值之前，對象中沒有“testNumber” 屬性，但在賦值后，則創建一個屬性。之后的任何賦值語句都不需要再創建這個屬性，而只會重新設置它的值：objectRef.testNumber = 8; /* - 或- */ objectRef["testNumber"] = 8; 稍后我們會介紹，Javascript 對象都有原型（prototypes）屬性，而這些原型本身也是對象，因而也可以帶有命名的屬性。但是，原型對象命名屬性的作用并不體現在賦值階段。同樣，在將值賦給其命名屬性時，如果對象沒有該屬性則會創建該命名屬性，否則會重設該屬性的值。值的讀取 當讀取對象的屬性值時，原型對象的作用便體現出來。如果對象的原型中包含屬性訪問器（property accessor）所使用的屬性名，那么該屬性的值就會返回：/* 為命名屬性賦值。如果在賦值前對象沒有相應的屬性，那么賦值后就會得到一個：*/ objectRef.testNumber = 8;/* 從屬性中讀取值 */var val = objectRef.testNumber; /* 現在， - val - 中保存著剛賦給對象命名屬性的值 8*/而且，由于所有對象都有原型，而原型本身也是對象，所以原型也可能有原型，這樣就構成了所謂的原型鏈。原型鏈終止于鏈中原型為 null 的對象。Object 構造函數的默認原型就有一個 null 原型，因此：var objectRef = new Object(); //創建一個普通的 JavaScript 對象。 創建了一個原型為 Object.prototype 的對象，而該原型自身則擁有一個值為 null 的原型。也就是說，objectRef 的原型鏈中只包含一個對象－－ Object.prototype。但對于下面的代碼而言：/* 創建 - MyObject1 - 類型對象的函數*/ function MyObject1(formalParameter){/* 給創建的對象添加一個名為 - testNumber - 的屬性并將傳遞給構造函數的第一個參數指定為該屬性的值：*/this.testNumber = formalParameter; }/* 創建 - MyObject2 - 類型對象的函數*/ function MyObject2(formalParameter){/* 給創建的對象添加一個名為 - testString - 的屬性并將傳遞給構造函數的第一個參數指定為該屬性的值：*/this.testString = formalParameter; }/* 接下來的操作用 MyObject1 類的實例替換了所有與 MyObject2 類的實例相關聯的原型。而且，為 MyObject1 構造函數傳遞了參數 - 8 - ，因而其 - testNumber - 屬性被賦予該值：*/ MyObject2.prototype = new MyObject1( 8 );/* 最后，將一個字符串作為構造函數的第一個參數， 創建一個 - MyObject2 - 的實例，并將指向該對象的 引用賦給變量 - objectRef - ：*/var objectRef = new MyObject2( "String_Value" ); 被變量 objectRef 所引用的 MyObject2 的實例擁有一個原型鏈。該鏈中的第一個對象是在創建后被指定給 MyObject2 構造函數的 prototype 屬性的 MyObject1 的一個實例。MyObject1 的實例也有一個原型，即與 Object.prototype 所引用的對象對應的默認的 Object 對象的原型。最后， Object.prototype 有一個值為 null 的原型，因此這條原型鏈到此結束。當某個屬性訪問器嘗試讀取由 objectRef 所引用的對象的屬性值時，整個原型鏈都會被搜索。在下面這種簡單的情況下：var val = objectRef.testString; 因為 objectRef 所引用的 MyObject2 的實例有一個名為“testString”的屬性，因此被設置為“String_Value”的該屬性的值被賦給了變量 val。但是：var val = objectRef.testNumber; 則不能從 MyObject2 實例自身中讀取到相應的命名屬性值，因為該實例沒有這個屬性。然而，變量 val 的值仍然被設置為 8，而不是未定義－－這是因為在該實例中查找相應的命名屬性失敗后，解釋程序會繼續檢查其原型對象。而該實例的原型對象是 MyObject1 的實例，這個實例有一個名為“testNumber”的屬性并且值為 8，所以這個屬性訪問器最后會取得值 8。而且，雖然 MyObject1 和 MyObject2 都沒有定義 toString 方法，但是當屬性訪問器通過 objectRef 讀取 toString 屬性的值時：var val = objectRef.toString; 變量 val 也會被賦予一個函數的引用。這個函數就是在 Object.prototype 的 toString 屬性中所保存的函數。之所以會返回這個函數，是因為發生了搜索objectRef 原型鏈的過程。當在作為對象的 objectRef 中發現沒有“toString”屬性存在時，會搜索其原型對象，而當原型對象中不存在該屬性時，則會繼續搜索原型的原型。而原型鏈中最終的原型是 Object.prototype，這個對象確實有一個 toString 方法，因此該方法的引用被返回。最后：var val = objectRef.madeUpProperty; 返回 undefined，因為在搜索原型鏈的過程中，直至 Object.prototype 的原型－－null，都沒有找到任何對象有名為“madeUpPeoperty”的屬性，因此最終返回 undefined。不論是在對象或對象的原型中，讀取命名屬性值的時候只返回首先找到的屬性值。而當為對象的命名屬性賦值時，如果對象自身不存在該屬性則創建相應的屬性。這意味著，如果執行像 objectRef.testNumber = 3 這樣一條賦值語句，那么這個 MyObject2 的實例自身也會創建一個名為“testNumber”的屬性，而之后任何讀取該命名屬性的嘗試都將獲得相同的新值。這時候，屬性訪問器不會再進一步搜索原型鏈，但 MyObject1 實例值為 8 的“testNumber”屬性并沒有被修改。給 objectRef 對象的賦值只是遮擋了其原型鏈中相應的屬性。注意：ECMAScript 為 Object 類型定義了一個內部 [[prototype]] 屬性。這個屬性不能通過腳本直接訪問，但在屬性訪問器解析過程中，則需要用到這個內部 [[prototype]] 屬性所引用的對象鏈－－即原型鏈。可以通過一個公共的 prototype 屬性，來對與內部的 [[prototype]] 屬性對應的原型對象進行賦值或定義。這兩者之間的關系在 ECMA 262（3rd edition）中有詳細描述，但超出了本文要討論的范疇。標識符解析、執行環境和作用域鏈 執行環境 執行環境是 ECMAScript 規范（ECMA 262 第 3 版）用于定義 ECMAScript 實現必要行為的一個抽象的概念。對如何實現執行環境，規范沒有作規定。但由于執行環境中包含引用規范所定義結構的相關屬性，因此執行環境中應該保有（甚至實現）帶有屬性的對象－－即使屬性不是公共屬性。所有 JavaScript 代碼都是在一個執行環境中被執行的。全局代碼（作為內置的 JS 文件執行的代碼，或者 HTML 頁面加載的代碼）是在我將稱之為“全局執行環境”的執行環境中執行的，而對函數的每次調用（有可能是作為構造函數）同樣有關聯的執行環境。通過 eval 函數執行的代碼也有截然不同的執行環境，但因為 JavaScript 程序員在正常情況下一般不會使用 eval，所以這里不作討論。有關執行環境的詳細說明請參閱 ECMA 262（第 3 版）第 10.2 節。當調用一個 JavaScript 函數時，該函數就會進入相應的執行環境。如果又調用了另外一個函數（或者遞歸地調用同一個函數），則又會創建一個新的執行環境，并且在函數調用期間執行過程都處于該環境中。當調用的函數返回后，執行過程會返回原始執行環境。因而，運行中的 JavaScript 代碼就構成了一個執行環境棧。在創建執行環境的過程中，會按照定義的先后順序完成一系列操作。首先，在一個函數的執行環境中，會創建一個“活動”對象。活動對象是規范中規定的另外一種機制。之所以稱之為對象，是因為它擁有可訪問的命名屬性，但是它又不像正常對象那樣具有原型（至少沒有預定義的原型），而且不能通過 JavaScript 代碼直接引用活動對象。為函數調用創建執行環境的下一步是創建一個 arguments 對象，這是一個類似數組的對象，它以整數索引的數組成員一一對應地保存著調用函數時所傳遞的參數。這個對象也有 length 和 callee 屬性（這兩個屬性與我們討論的內容無關，詳見規范）。然后，會為活動對象創建一個名為“arguments”的屬性，該屬性引用前面創建的 arguments 對象。接著，為執行環境分配作用域。作用域由對象列表（鏈）組成。每個函數對象都有一個內部的 [[scope]] 屬性（該屬性我們稍后會詳細介紹），這個屬性也由對象列表（鏈）組成。指定給一個函數調用執行環境的作用域，由該函數對象的 [[scope]] 屬性所引用的對象列表（鏈）組成，同時，活動對象被添加到該對象列表的頂部（鏈的前端）。之后會發生由 ECMA 262 中所謂“可變”對象完成的“變量實例化”的過程。只不過此時使用活動對象作為可變對象（這里很重要，請注意：它們是同一個對象）。此時會將函數的形式參數創建為可變對象命名屬性，如果調用函數時傳遞的參數與形式參數一致，則將相應參數的值賦給這些命名屬性（否則，會給命名屬性賦 undefined 值）。對于定義的內部函數，會以其聲明時所用名稱為可變對象創建同名屬性，而相應的內部函數則被創建為函數對象并指定給該屬性。變量實例化的最后一步是將在函數內部聲明的所有局部變量創建為可變對象的命名屬性。根據聲明的局部變量創建的可變對象的屬性在變量實例化過程會被賦予 undefined 值。在執行函數體內的代碼、并計算相應的賦值表達式之前不會對局部變量執行真正的實例化。事實上，擁有 arguments 屬性的活動對象和擁有與函數局部變量對應的命名屬性的可變對象是同一個對象。因此，可以將標識符 arguments 作為函數的局部變量來看待。回到頂部 最后，在this可以被使用之前，還必須先對其賦值。如果賦的值是一個對象的引用，則 this.m 訪問的便是該對象上的 m。如果（內部）賦的值是 null，則this就指向全局對象。 （此段由 pangba 劉未鵬 翻譯）（原文備考：Finally a value is assigned for use with the this keyword. If the value assigned refers to an object then property accessors prefixed with the this keyword reference properties of that object. If the value assigned (internally) is null then the this keyword will refer to the global object. ）創建全局執行環境的過程會稍有不同，因為它沒有參數，所以不需要通過定義的活動對象來引用這些參數。但全局執行環境也需要一個作用域，而它的作用域鏈實際上只由一個對象－－全局對象－－組成。全局執行環境也會有變量實例化的過程，它的內部函數就是涉及大部分 JavaScript 代碼的、常規的頂級函數聲明。而且，在變量實例化過程中全局對象就是可變對象，這就是為什么全局性聲明的函數是全局對象屬性的原因。全局性聲明的變量同樣如此。全局執行環境也會使用 this 對象來引用全局對象。作用域鏈與 [[scope]] 調用函數時創建的執行環境會包含一個作用域鏈，這個作用域鏈是通過將該執行環境的活動（可變）對象添加到保存于所調用函數對象的 [[scope]] 屬性中的作用域鏈前端而構成的。所以，理解函數對象內部的 [[scope]] 屬性的定義過程至關重要。在 ECMAScript 中，函數也是對象。函數對象在變量實例化過程中會根據函數聲明來創建，或者是在計算函數表達式或調用 Function 構造函數時創建。通過調用 Function 構造函數創建的函數對象，其內部的 [[scope]] 屬性引用的作用域鏈中始終只包含全局對象。通過函數聲明或函數表達式創建的函數對象，其內部的 [[scope]] 屬性引用的則是創建它們的執行環境的作用域鏈。在最簡單的情況下，比如聲明如下全局函數：-function exampleFunction(formalParameter){... // 函數體內的代碼 } 當為創建全局執行環境而進行變量實例化時，會根據上面的函數聲明創建相應的函數對象。因為全局執行環境的作用域鏈中只包含全局對象，所以它就給自己創建的、并以名為“exampleFunction”的屬性引用的這個函數對象的內部 [[scope]] 屬性，賦予了只包含全局對象的作用域鏈。當在全局環境中計算函數表達式時，也會發生類似的指定作用域鏈的過程：-var exampleFuncRef = function(){... // 函數體代碼 } 在這種情況下，不同的是在全局執行環境的變量實例化過程中，會先為全局對象創建一個命名屬性。而在計算賦值語句之前，暫時不會創建函數對象，也不會將該函數對象的引用指定給全局對象的命名屬性。但是，最終還是會在全局執行環境中創建這個函數對象（當計算函數表達式時。譯者注），而為這個創建的函數對象的 [[scope]] 屬性指定的作用域鏈中仍然只包含全局對象。內部的函數聲明或表達式會導致在包含它們的外部函數的執行環境中創建相應的函數對象，因此這些函數對象的作用域鏈會稍微復雜一些。在下面的代碼中，先定義了一個帶有內部函數聲明的外部函數，然后調用外部函數：function exampleOuterFunction(formalParameter){function exampleInnerFuncitonDec(){... // 內部函數體代碼}... // 其余的外部函數體代碼 }exampleOuterFunction( 5 ); 與外部函數聲明對應的函數對象會在全局執行環境的變量實例化過程中被創建。因此，外部函數對象的 [[scope]] 屬性中會包含一個只有全局對象的“單項目”作用域鏈。當在全局執行環境中調用 exampleOuterFunction 函數時，會為該函數調用創建一個新的執行環境和一個活動（可變）對象。這個新執行環境的作用域就由新的活動對象后跟外部函數對象的 [[scope]] 屬性所引用的作用域鏈（只有全局對象）構成。在新執行環境的變量實例化過程中，會創建一個與內部函數聲明對應的函數對象，而同時會給這個函數對象的 [[scope]] 屬性指定創建該函數對象的執行環境（即新執行環境。譯者注）的作用域值－－即一個包含活動對象后跟全局對象的作用域鏈。到目前為止，所有過程都是自動、或者由源代碼的結構所控制的。但我們發現，執行環境的作用域鏈定義了執行環境所創建的函數對象的 [[scope]] 屬性，而函數對象的 [[scope]] 屬性則定義了它的執行環境的作用域（包括相應的活動對象）。不過，ECMAScript 也提供了用于修改作用域鏈 with 語句。with 語句會計算一個表達式，如果該表達式是一個對象，那么就將這個對象添加到當前執行環境的作用域鏈中（在活動<可變>對象之前）。然后，執行 with 語句（它自身也可能是一個語句塊）中的其他語句。之后，又恢復到調用它之前的執行環境的作用域鏈中。with 語句不會影響在變量實例化過程中根據函數聲明創建函數對象。但是，可以在一個 with 語句內部對函數表達式求值：-/* 創建全局變量 - y - 它引用一個對象：- */ var y = {x:5}; // 帶有一個屬性 - x - 的對象直接量 function exampleFuncWith(){var z;/* 將全局對象 - y - 引用的對象添加到作用域鏈的前端：- */with(y){/* 對函數表達式求值，以創建函數對象并將該函數對象的引用指定給局部變量 - z - :- */z = function(){... // 內部函數表達式中的代碼;}}... }/* 執行 - exampleFuncWith - 函數:- */ exampleFuncWith(); 在調用 exampleFuncWith 函數所創建的執行環境中包含一個由其活動對象后跟全局對象構成的作用域鏈。而在執行 with 語句時，又會把全局變量 y 引用的對象添加到這個作用域鏈的前端。在對其中的函數表達式求值的過程中，所創建函數對象的 [[scope]] 屬性與創建它的執行環境的作用域保持一致－－即，該屬性會引用一個由對象 y 后跟調用外部函數時所創建執行環境的活動對象，后跟全局對象的作用域鏈。當與 with 語句相關的語句塊執行結束時，執行環境的作用域得以恢復（y 會被移除），但是已經創建的函數對象（z。譯者注）的 [[scope]] 屬性所引用的作用域鏈中位于最前面的仍然是對象 y。標識符解析 標識符是沿作用域鏈逆向解析的。ECMA 262 將 this 歸類為關鍵字而不是標識符，并非不合理。因為解析 this 值時始終要根據使用它的執行環境來判斷，而與作用域鏈無關。標識符解析從作用域鏈中的第一個對象開始。檢查該對象中是否包含與標識符對應的屬性名。因為作用域鏈是一條對象鏈，所以這個檢查過程也會包含相應對象的原型鏈（如果有）。如果沒有在作用域鏈的第一個對象中發現相應的值，解析過程會繼續搜索下一個對象。這樣依次類推直至找到作用域鏈中包含以標識符為屬性名的對象為止，也有可能在作用域鏈的所有對象中都沒有發現該標識符。當基于對象使用屬性訪問器時，也會發生與上面相同的標識符解析過程。當屬性訪問器中有相應的屬性可以替換某個對象時，這個屬性就成為表示該對象的標識符，該對象在作用域鏈中的位置進而被確定。全局對象始終都位于作用域鏈的尾端。因為與函數調用相關的執行環境將會把活動（可變）對象添加到作用域鏈的前端，所以在函數體內使用的標識符會首先檢查自己是否與形式參數、內部函數聲明的名稱或局部變量一致。這些都可以由活動（可變）對象的命名屬性來確定。閉包 自動垃圾收集 ECMAScript 要求使用自動垃圾收集機制。但規范中并沒有詳細說明相關的細節，而是留給了實現來決定。但據了解，相當一部分實現對它們的垃圾收集操作只賦予了很低的優先級。但是，大致的思想都是相同的，即如果對象不再“可引用（由于不存在對它的引用，使執行代碼無法再訪問到它）”時，該對象就成為垃圾收集的目標。因而，在將來的某個時刻會將這個對象銷毀并將它所占用的一切資源釋放，以便操作系統重新利用。正常情況下，當退出一個執行環境時就會滿足類似的條件。此時，作用域鏈結構中的活動（可變）對象以及在該執行環境中創建的任何對象－－包括函數對象，都不再“可引用”，因此將成為垃圾收集的目標。構成閉包 閉包是通過在對一個函數調用的執行環境中返回一個函數對象構成的。比如，在對函數調用的過程中，將一個對內部函數對象的引用指定給另一個對象的屬性。或者，直接將這樣一個（內部）函數對象的引用指定給一個全局變量、或者一個全局性對象的屬性，或者一個作為參數以引用方式傳遞給外部函數的對象。例如：-function exampleClosureForm(arg1, arg2){var localVar = 8;function exampleReturned(innerArg){return ((arg1 + arg2)/(innerArg + localVar));}/* 返回一個定義為 exampleReturned 的內部函數的引用 -:- */return exampleReturned; }var globalVar = exampleClosureForm(2, 4); 這種情況下，在調用外部函數 exampleClosureForm 的執行環境中所創建的函數對象就不會被當作垃圾收集，因為該函數對象被一個全局變量所引用，而且仍然是可以訪問的，甚至可以通過 globalVar(n) 來執行。的確，情況比正常的時候要復雜一些。因為現在這個被變量 globalVar 引用的內部函數對象的 [[scope]] 屬性所引用的作用域鏈中，包含著屬于創建該內部函數對象的執行環境的活動對象（和全局對象）。由于在執行被 globalVar 引用的函數對象時，每次都要把該函數對象的 [[scope]] 屬性所引用的整個作用域鏈添加到創建的（內部函數的）執行環境的作用域中（即此時的作用域中包括：內部執行環境的活動對象、外部執行環境的活動對象、全局對象。譯者注）， 所以這個（外部執行環境的）活動對象不會被當作垃圾收集。閉包因此而構成。此時，內部函數對象擁有自由的變量，而位于該函數作用域鏈中的活動（可變）對象則成為與變量綁定的環境。由于活動（可變）對象受限于內部函數對象（現在被 globalVar 變量引用）的 [[scope]] 屬性中作用域鏈的引用，所以活動對象連同它的變量聲明－－即屬性的值，都會被保留。而在對內部函數調用的執行環境中進行作用域解析時，將會把與活動（可變）對象的命名屬性一致的標識符作為該對象的屬性來解析。活動對象的這些屬性值即使是在創建它的執行環境退出后，仍然可以被讀取和設置。在上面的例子中，當外部函數返回（退出它的執行環境）時，其活動（可變）對象的變量聲明中記錄了形式參數、內部函數定義以及局部變量的值。arg1 屬性的值為 2，而 arg2 屬性的值為 4，localVar 的值是 8，還有一個 exampleReturned 屬性，它引用由外部函數返回的內部函數對象。（為方便起見，我們將在后面的討論中，稱這個活動<可變>對象為 "ActOuter1"）。如果再次調用 exampleClosureForm 函數，如：-var secondGlobalVar = exampleClosureForm(12, 3); - 則會創建一個新的執行環境和一個新的活動對象。而且，會返回一個新的函數對象，該函數對象的 [[scope]] 屬性引用的作用域鏈與前一次不同，因為這一次的作用域鏈中包含著第二個執行環境的活動對象，而這個活動對象的屬性 arg1 值為 12 而屬性 arg2 值為 3。（為方便起見，我們將在后面的討論中，稱這個活動<可變>對象為 "ActOuter2"）。通過第二次執行 exampleClosureForm 函數，第二個、也是截然不同的閉包誕生了。通過執行 exampleClosureForm 創建的兩個函數對象分別被指定給了全局變量 globalVar 和 secondGlobalVar，并返回了表達式 ((arg1 + arg2)/(innerArg + localVar))。該表達式對其中的四個標識符應用了不同的操作符。如何確定這些標識符的值是體現閉包價值的關鍵所在。我們來看一看，在執行由 globalVar 引用的函數對象－－如 globalVar(2)－－時的情形。此時，會創建一個新的執行環境和相應的活動對象（我們將稱之為“ActInner1”），并把該活動對象添加到執行的函數對象的 [[scope]] 屬性所引用的作用域鏈的前端。ActInner1 會帶有一個屬性 innerArg，根據傳遞的形式參數，其值被指定為 2。這個新執行環境的作用域鏈變成： ActInner1->ActOuter1->全局對象.為了返回表達式 ((arg1 + arg2)/(innerArg + localVar)) 的值，要沿著作用域鏈進行標識符解析。表達式中標識符的值將通過依次查找作用域鏈中每個對象（與標識符名稱一致）的屬性來確定。作用域鏈中的第一個對象是 ActInner1，它有一個名為 innerArg 的屬性，值是 2。所有其他三個標識符在 ActOuter1 中都有對應的屬性：arg1 是 2，arg2 是 4 而 localVar 是 8。最后，函數調用返回 ((2 + 2)/(2 + 8))。現在再來看一看由 secondGlobalVar 引用的同一個函數對象的執行情況，比如 secondGlobalVar(5)。我們把這次創建的新執行環境的活動對象稱為 “ActInner2”，相應的作用域鏈就變成了：ActInner2->ActOuter2->全局對象。ActInner2 返回 innerArg 的值 5，而 ActOuter2 分別返回 arg1、arg2 和 localVar 的值 12、3 和 8。函數調用返回的值就是 ((12 + 3)/(5 + 8))。如果再執行一次 secondGlobalVar，則又會有一個新活動對象被添加到作用域鏈的前端，但 ActOuter2 仍然是鏈中的第二個對象，而他的命名屬性會再次用于完成標識符 arg1、arg2 和 localVar 的解析。這就是 ECMAScript 的內部函數獲取、維持和訪問創建他們的執行環境的形式參數、聲明的內部函數以及局部變量的過程。這個過程說明了構成閉包以后，內部的函數對象在其存續過程中，如何維持對這些值的引用、如何對這些值進行讀取的機制。即，創建內部函數對象的執行環境的活動（可變）對象，會保留在該函數對象的 [[scope]] 屬性所引用的作用域鏈中。直到所有對這個內部函數的引用被釋放，這個函數對象才會成為垃圾收集的目標（連同它的作用域鏈中任何不再需要的對象）。內部函數自身也可能有內部函數。在通過函數執行返回內部函數構成閉包以后，相應的閉包自身也可能會返回內部函數從而構成它們自己的閉包。每次作用域鏈嵌套，都會增加由創建內部函數對象的執行環境引發的新活動對象。ECMAScript 規范要求作用域鏈是臨時性的，但對作用域鏈的長度卻沒有加以限制。在具體實現中，可能會存在實際的限制，但還沒有發現有具體限制數量的報告。目前來看，嵌套的內部函數所擁有的潛能，仍然超出了使用它們的人的想像能力。通過閉包可以做什么？ 對這個問題的回答可能會令你驚訝－－閉包什么都可以做。據我所知，閉包使得 ECMAScript 能夠模仿任何事物，因此局限性在于設計和實現要模仿事物的能力。只是從字面上看可能會覺得這么說很深奧，下面我們就來看一些更有實際意義的例子。例 1：為函數引用設置延時 閉包的一個常見用法是在執行函數之前為要執行的函數提供參數。例如：將函數作為 setTimout 函數的第一個參數，這在 Web 瀏覽器的環境下是非常常見的一種應用。setTimeout 用于有計劃地執行一個函數（或者一串 JavaScript 代碼，不是在本例中），要執行的函數是其第一個參數，其第二個參數是以毫秒表示的執行間隔。也就是說，當在一段代碼中使用 setTimeout 時，要將一個函數的引用作為它的第一個參數，而將以毫秒表示的時間值作為第二個參數。但是，傳遞函數引用的同時無法為計劃執行的函數提供參數。然而，可以在代碼中調用另外一個函數，由它返回一個對內部函數的引用，再把這個對內部函數對象的引用傳遞給 setTimeout 函數。執行這個內部函數時要使用的參數在調用返回它的外部函數時傳遞。這樣，setTimeout 在執行這個內部函數時，不用傳遞參數，但該內部函數仍然能夠訪問在調用返回它的外部函數時傳遞的參數：function callLater(paramA, paramB, paramC){/* 返回一個由函數表達式創建的匿名內部函數的引用:- */return (function(){/* 這個內部函數將通過 - setTimeout - 執行，而且當它執行時它會讀取并按照傳遞給外部函數的參數行事：*/paramA[paramB] = paramC;}); }.../* 調用這個函數將返回一個在其執行環境中創建的內部函數對象的引用。傳遞的參數最終將作為外部函數的參數被內部函數使用。返回的對內部函數的引用被賦給一個全局變量:- */var functRef = callLater(elStyle, "display", "none"); /* 調用 setTimeout 函數，將賦給變量 - functRef - 的內部函數的引用作為傳遞的第一個參數:- */ hideMenu=setTimeout(functRef, 500); 例 2: 通過對象實例方法關聯函數 回到頂部 許多時候我們需要將一個函數對象暫時掛到一個引用上留待后面執行，因為不等到執行的時候是很難知道其具體參數的，而先前將它賦給那個引用的時候更是壓根不知道的。 （此段由 pangba 劉未鵬 翻譯）（luyy朋友的翻譯_2008-7-7更新）很多時候需要將一個函數引用進行賦值，以便在將來某個時候執行該函數，在執行這些函數時給函數提供參數將會是有用處的，但這些參數在執行時不容易獲得，他們只有在上面賦值給時才能確定。（原文備考：There are many other circumstances when a reference to a function object is assigned so that it would be executed at some future time where it is useful to provide parameters for the execution of that function that would not be easily available at the time of execution but cannot be known until the moment of assignment.）一個相關的例子是，用 JavaScript 對象來封裝與特定 DOM 元素的交互。這個 JavaScript 對象具有 doOnClick、doMouseOver 和 doMouseOut 方法，并且當用戶在該特定的 DOM 元素中觸發了相應的事件時要執行這些方法。不過，可能會創建與不同的 DOM 元素關聯的任意數量的 JavaScript 對象，而且每個對象實例并不知道實例化它們的代碼將會如何操縱它們（即注冊事件處理函數與定義相應的事件處理函數分離。譯者注）。這些對象實例并不知道如何在全局環境中引用它們自身，因為它們不知道將會指定哪個全局變量（如果有）引用它們的實例。因而問題可以歸結為執行一個與特定的 JavaScript 對象關聯的事件處理函數，并且要知道調用該對象的哪個方法。下面這個例子使用了一個基于閉包構建的一般化的函數（此句多謝未鵬指點），該函數會將對象實例與 DOM 元素事件關聯起來，安排執行事件處理程序時調用對象實例的指定方法，給象的指定方法傳遞的參數是事件對象和與元素關聯的引用，該函數返回執行相應方法后的返回值。/* 一個關聯對象實例和事件處理器的函數。 它返回的內部函數被用作事件處理器。對象實例以 - obj - 參數表示， 而在該對象實例中調用的方法名則以 - methodName - （字符串）參數表示。 */ function associateObjWithEvent(obj, methodName){/* 下面這個返回的內部函數將作為一個 DOM 元素的事件處理器*/ return (function(e){/* 在支持標準 DOM 規范的瀏覽器中，事件對象會被解析為參數 - e - ， 若沒有正常解析，則使用 IE 的事件對象來規范化事件對象。 */ e = e||window.event;/* 事件處理器通過保存在字符串 - methodName - 中的方法名調用了對象 - obj - 的一個方法。并傳遞已經規范化的事件對象和觸發事件處理器的元素 的引用 - this - （之所以 this 有效是因為這個內部函數是作為該元素的方法執行的） */ return obj[methodName](e, this);}); }/* 這個構造函數用于創建將自身與 DOM 元素關聯的對象， DOM 元素的 ID 作為構造函數的字符串參數。 所創建的對象會在相應的元素觸發 onclick、 onmouseover 或 onmouseout 事件時， 調用相應的方法。 */ function DhtmlObject(elementId){/* 調用一個返回 DOM 元素（如果沒找到返回 null）引用的函數， 必需的參數是 ID。 將返回的值賦給局部變量 - el -。 */ var el = getElementWithId(elementId);/* - el - 值會在內部通過類型轉換變為布爾值，以便 - if - 語句加以判斷。 因此，如果它引用一個對象結果將返回 true，如果是 null 則返回 false。 下面的代碼塊只有當 - el - 變量返回一個 DOM 元素時才會被執行。 */if(el){/* 為給元素的事件處理器指定一個函數，該對象調用了 - associateObjWithEvent - 函數。 同時對象將自身（通過 - this - 關鍵字）作為調用方法的對象， 并提供了調用的方法名稱。 - associateObjWithEvent - 函數會返回 一個內部函數，該內部函數被指定為 DOM 元素的事件處理器。 在響應事件時，執行這個內部函數就會調用必要的方法。 */el.onclick = associateObjWithEvent(this, "doOnClick");el.onmouseover = associateObjWithEvent(this, "doMouseOver");el.onmouseout = associateObjWithEvent(this, "doMouseOut");...} } DhtmlObject.prototype.doOnClick = function(event, element){... // doOnClick 方法體。. } DhtmlObject.prototype.doMouseOver = function(event, element){... // doMouseOver 方法體。 } DhtmlObject.prototype.doMouseOut = function(event, element){... // doMouseOut 方法體。 } 這樣，DhtmlObject 的任何實例都會將自身與相應的 DOM 元素關聯起來，而這些 DOM 元素不必知道其他代碼如何操縱它們（即當觸發相應事件時，會執行什么代碼。譯者注），也不必理會全局命名空間的影響以及與 DhtmlObject 的其他實例間存在沖突的危險。例 3：包裝相關的功能 閉包可以用于創建額外的作用域，通過該作用域可以將相關的和具有依賴性的代碼組織起來，以便將意外交互的風險降到最低。假設有一個用于構建字符串的函數，為了避免重復性的連接操作（和創建眾多的中間字符串），我們的愿望是使用一個數組按順序來存儲字符串的各個部分，然后再使用 Array.prototype.join 方法（以空字符串作為其參數）輸出結果。這個數組將作為輸出的緩沖器，但是將數組作為函數的局部變量又會導致在每次調用函數時都重新創建一個新數組，這在每次調用函數時只重新指定數組中的可變內容的情況下并不是必要的。一種解決方案是將這個數組聲明為全局變量，這樣就可以重用這個數組，而不必每次都建立新數組。但這個方案的結果是，除了引用函數的全局變量會使用這個緩沖數組外，還會多出一個全局屬性引用數組自身。如此不僅使代碼變得不容易管理，而且，如果要在其他地方使用這個數組時，開發者必須要再次定義函數和數組。這樣一來，也使得代碼不容易與其他代碼整合，因為此時不僅要保證所使用的函數名在全局命名空間中是唯一的，而且還要保證函數所依賴的數組在全局命名空間中也必須是唯一的。而通過閉包可以使作為緩沖器的數組與依賴它的函數關聯起來（優雅地打包），同時也能夠維持在全局命名空間外指定的緩沖數組的屬性名，免除了名稱沖突和意外交互的危險。其中的關鍵技巧在于通過執行一個單行（in-line）函數表達式創建一個額外的執行環境，而將該函數表達式返回的內部函數作為在外部代碼中使用的函數。此時，緩沖數組被定義為函數表達式的一個局部變量。這個函數表達式只需執行一次，而數組也只需創建一次，就可以供依賴它的函數重復使用。下面的代碼定義了一個函數，這個函數用于返回一個 HTML 字符串，其中大部分內容都是常量，但這些常量字符序列中需要穿插一些可變的信息，而可變的信息由調用函數時傳遞的參數提供。通過執行單行函數表達式返回一個內部函數，并將返回的函數賦給一個全局變量，因此這個函數也可以稱為全局函數。而緩沖數組被定義為外部函數表達式的一個局部變量。它不會暴露在全局命名空間中，而且無論什么時候調用依賴它的函數都不需要重新創建這個數組。/* 聲明一個全局變量 - getImgInPositionedDivHtml - 并將一次調用一個外部函數表達式返回的內部函數賦給它。這個內部函數會返回一個用于表示絕對定位的 DIV 元素包圍著一個 IMG 元素 的 HTML 字符串，這樣一來，所有可變的屬性值都由調用該函數時的參數提供： */ var getImgInPositionedDivHtml = (function(){/* 外部函數表達式的局部變量 - buffAr - 保存著緩沖數組。這個數組只會被創建一次，生成的數組實例對內部函數而言永遠是可用的因此，可供每次調用這個內部函數時使用。其中的空字符串用作數據占位符，相應的數據將由內部函數插入到這個數組中：*/var buffAr = ['<div id="','', //index 1, DIV ID 屬性'" style="position:absolute;top:','', //index 3, DIV 頂部位置'px;left:','', //index 5, DIV 左端位置'px;width:','', //index 7, DIV 寬度'px;height:','', //index 9, DIV 高度'px;overflow:hidden;\"><img src=\"','', //index 11, IMG URL'\" width=\"','', //index 13, IMG 寬度'\" height=\"','', //index 15, IMG 調蓄'\" alt=\"','', //index 17, IMG alt 文本內容'\"><\/div>'];/* 返回作為對函數表達式求值后結果的內部函數對象。這個內部函數就是每次調用執行的函數- getImgInPositionedDivHtml( ... ) -*/return (function(url, id, width, height, top, left, altText){/* 將不同的參數插入到緩沖數組相應的位置：*/buffAr[1] = id;buffAr[3] = top;buffAr[5] = left;buffAr[13] = (buffAr[7] = width);buffAr[15] = (buffAr[9] = height);buffAr[11] = url;buffAr[17] = altText;/* 返回通過使用空字符串（相當于將數組元素連接起來）連接數組每個元素后形成的字符串：*/return buffAr.join('');}); //:內部函數表達式結束。 })(); /*^^- :單行外部函數表達式。*/ 如果一個函數依賴于另一（或多）個其他函數，而其他函數又沒有必要被其他代碼直接調用，那么可以運用相同的技術來包裝這些函數，而通過一個公開暴露的函數來調用它們。這樣，就將一個復雜的多函數處理過程封裝成了一個具有移植性的代碼單元。其他例子 有關閉包的一個可能是最廣為人知的應用是 Douglas Crockford's technique for the emulation of private instance variables in ECMAScript objects。這種應用方式可以擴展到各種嵌套包含的可訪問性（或可見性）的作用域結構，包括 the emulation of private static members for ECMAScript objects。閉包可能的用途是無限的，可能理解其工作原理才是把握如何使用它的最好指南。意外的閉包 在創建可訪問的內部函數的函數體之外解析該內部函數就會構成閉包。這表明閉包很容易創建，但這樣一來可能會導致一種結果，即沒有認識到閉包是一種語言特性的 JavaScript 作者，會按照內部函數能完成多種任務的想法來使用內部函數。但他們對使用內部函數的結果并不明了，而且根本意識不到創建了閉包，或者那樣做意味著什么。正如下一節談到 IE 中內存泄漏問題時所提及的，意外創建的閉包可能導致嚴重的負面效應，而且也會影響到代碼的性能。問題不在于閉包本身，如果能夠真正做到謹慎地使用它們，反而會有助于創建高效的代碼。換句話說，使用內部函數會影響到效率。使用內部函數最常見的一種情況就是將其作為 DOM 元素的事件處理器。例如，下面的代碼用于向一個鏈接元素添加 onclick 事件處理器：/* 定義一個全局變量，通過下面的函數將它的值作為查詢字符串的一部分添加到鏈接的 - href - 中： */ var quantaty = 5; /* 當給這個函數傳遞一個鏈接（作為函數中的參數 - linkRef -）時，會將一個 onclick 事件處理器指定給該鏈接，該事件處理器將全局變量 - quantaty - 的值作為字符串添加到鏈接的 - href - 屬性中，然后返回 true 使該鏈接在單擊后定位到由 - href - 屬性包含的查詢字符串指定的資源： */ function addGlobalQueryOnClick(linkRef){/* 如果可以將參數 - linkRef - 通過類型轉換為 ture（說明它引用了一個對象）：*/if(linkRef){/* 對一個函數表達式求值，并將對該函數對象的引用指定給這個鏈接元素的 onclick 事件處理器：*/linkRef.onclick = function(){/* 這個內部函數表達式將查詢字符串添加到附加事件處理器的元素的 - href - 屬性中：*/this.href += ('?quantaty='+escape(quantaty));return true;};} } 無論什么時候調用 addGlobalQueryOnClick 函數，都會創建一個新的內部函數（通過賦值構成了閉包）。從效率的角度上看，如果只是調用一兩次 addGlobalQueryOnClick 函數并沒有什么大的妨礙，但如果頻繁使用該函數，就會導致創建許多截然不同的函數對象（每對內部函數表達式求一次值，就會產生一個新的函數對象）。上面例子中的代碼沒有關注內部函數在創建它的函數外部可以訪問（或者說構成了閉包）這一事實。實際上，同樣的效果可以通過另一種方式來完成。即單獨地定義一個用于事件處理器的函數，然后將該函數的引用指定給元素的事件處理屬性。這樣，只需創建一個函數對象，而所有使用相同事件處理器的元素都可以共享對這個函數的引用：/* 定義一個全局變量，通過下面的函數將它的值作為查詢字符串的一部分添加到鏈接的 - href - 中： */ var quantaty = 5;/* 當把一個鏈接（作為函數中的參數 - linkRef -）傳遞給這個函數時，會給這個鏈接添加一個 onclick 事件處理器，該事件處理器會將全局變量 - quantaty - 的值作為查詢字符串的一部分添加到鏈接的 - href - 中，然后返回 true，以便單擊鏈接時定位到由作為 - href - 屬性值的查詢字符串所指定的資源： */ function addGlobalQueryOnClick(linkRef){/* 如果 - linkRef - 參數能夠通過類型轉換為 true（說明它引用了一個對象）：*/if(linkRef){/* 將一個對全局函數的引用指定給這個鏈接的事件處理屬性，使函數成為鏈接元素的事件處理器：*/linkRef.onclick = forAddQueryOnClick;} } /* 聲明一個全局函數，作為鏈接元素的事件處理器，這個函數將一個全局變量的值作為要添加事件處理器的鏈接元素的 - href - 值的一部分： */ function forAddQueryOnClick(){this.href += ('?quantaty='+escape(quantaty));return true; } 在上面例子的第一個版本中，內部函數并沒有作為閉包發揮應有的作用。在那種情況下，反而是不使用閉包更有效率，因為不用重復創建許多本質上相同的函數對象。類似地考量同樣適用于對象的構造函數。與下面代碼中的構造函數框架類似的代碼并不罕見：function ExampleConst(param){/* 通過對函數表達式求值創建對象的方法，并將求值所得的函數對象的引用賦給要創建對象的屬性：*/this.method1 = function(){... // 方法體。};this.method2 = function(){... // 方法體。};this.method3 = function(){... // 方法體。};/* 把構造函數的參數賦給對象的一個屬性：*/this.publicProp = param; } 每當通過 new ExampleConst(n) 使用這個構造函數創建一個對象時，都會創建一組新的、作為對象方法的函數對象。因此，創建的對象實例越多，相應的函數對象也就越多。Douglas Crockford 提出的模仿 JavaScript 對象私有成員的技術，就利用了將對內部函數的引用指定給在構造函數中構造對象的公共屬性而形成的閉包。如果對象的方法沒有利用在構造函數中形成的閉包，那么在實例化每個對象時創建的多個函數對象，會使實例化過程變慢，而且將有更多的資源被占用，以滿足創建更多函數對象的需要。這那種情況下，只創建一次函數對象，并把它們指定給構造函數 prototype 的相應屬性顯然更有效率。這樣一來，它們就能被構造函數創建的所有對象共享了：function ExampleConst(param){/* 將構造函數的參數賦給對象的一個屬性：*/this.publicProp = param; } /* 通過對函數表達式求值，并將結果函數對象的引用指定給構造函數原型的相應屬性來創建對象的方法： */ ExampleConst.prototype.method1 = function(){... // 方法體。 }; ExampleConst.prototype.method2 = function(){... // 方法體。 }; ExampleConst.prototype.method3 = function(){... // 方法體。 };Internet Explorer 的內存泄漏問題 Internet Explorer Web 瀏覽器（在 IE 4 到 IE 6 中核實）的垃圾收集系統中存在一個問題，即如果 ECMAScript 和某些宿主對象構成了 "循環引用"，那么這些對象將不會被當作垃圾收集。此時所謂的宿主對象指的是任何 DOM 節點（包括 document 對象及其后代元素）和 ActiveX 對象。如果在一個循環引用中包含了一或多個這樣的對象，那么這些對象直到瀏覽器關閉都不會被釋放，而它們所占用的內存同樣在瀏覽器關閉之前都不會交回系統重用。當兩個或多個對象以首尾相連的方式相互引用時，就構成了循環引用。比如對象 1 的一個屬性引用了對象 2 ，對象 2 的一個屬性引用了對象 3，而對象 3 的一個屬性又引用了對象 1。對于純粹的 ECMAScript 對象而言，只要沒有其他對象引用對象 1、2、3，也就是說它們只是相互之間的引用，那么仍然會被垃圾收集系統識別并處理。但是，在 Internet Explorer 中，如果循環引用中的任何對象是 DOM 節點或者 ActiveX 對象，垃圾收集系統則不會發現它們之間的循環關系與系統中的其他對象是隔離的并釋放它們。最終它們將被保留在內存中，直到瀏覽器關閉。閉包非常容易構成循環引用。如果一個構成閉包的函數對象被指定給，比如一個 DOM 節點的事件處理器，而對該節點的引用又被指定給函數對象作用域中的一個活動（或可變）對象，那么就存在一個循環引用。DOM_Node.onevent ->function_object.[[scope]] ->scope_chain ->Activation_object.nodeRef ->DOM_Node。形成這樣一個循環引用是輕而易舉的，而且稍微瀏覽一下包含類似循環引用代碼的網站（通常會出現在網站的每個頁面中），就會消耗大量（甚至全部）系統內存。多加注意可以避免形成循環引用，而在無法避免時，也可以使用補償的方法，比如使用 IE 的 onunload 事件來來清空（null）事件處理函數的引用。時刻意識到這個問題并理解閉包的工作機制是在 IE 中避免此類問題的關鍵。comp.lang.javascript FAQ notes T.O.C.撰稿 Richard Cornford，2004 年 3 月 修改建議來自：

轉載于:https://www.cnblogs.com/oneroom/archive/2010/11/20/closure.html

總結

以上是生活随笔為你收集整理的理解 JavaScript 闭包的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。