雖然 JavaScript 天生就是一副隨便的樣子，但是隨著瀏覽器能夠完成的事情越來越多，這門語言也越來越經常地擺出正襟危坐的架勢。在複雜的邏輯下， JavaScript 需要被模組化，模組需要封裝起來，只留下讓外界呼叫的介面。閉包是 JavaScript 中實作模組封裝的關鍵，也是許多初學者難以理解的重點。最初，我也陷入迷惑之中。現在，我自信對這個概念已經有了比較深入的理解。為了便於理解，文中試圖封裝一個比較簡單的物件。
我們試著在頁面上維護一個計數器物件 ticker ，這個物件維護一個數值 n 。隨著使用者的操作，我們可以增加一次計數（將數值 n 加上 1 ），但不能減少 n 或直接改變 n 。而且，我們需要時不時查詢這個數值。
門戶大開的JSON 風格模組化
一種門戶大開的方式是：
var ticker = {
n:0,
tick:function(){this
這種方式書寫自然，而且確實有效，我們需要增加一次計數時，就呼叫ticker.tick() 方法，需要查詢次數時，就存取ticker.n 變數。但其缺點也是顯而易見的：模組的使用者被允許自由地改變 n ，例如呼叫 ticker.n-- 或 ticker.n=-1 。我們並沒有對 ticker 進行封裝， n 和 tick() 看上去是 ticker 的“成員”，但是它們的可訪問性和 ticker 一樣，都是全局性的（如果 ticker 是全局變量的話）。在封裝性上，這種模組化的方式比下面這種更可笑的方式，只好那麼一點點（雖然對有些簡單的應用來說，這一點點也足夠了）。
var ticker = {};
var tickerN = 0;
var tickerN = 0;
var tickerTick = function(){
tickerN++;
}
.n ——這並不是因為n 是ticker 的成員，而是因為呼叫tick() 的是ticker 。事實上這裡寫成ticker.n 會比較好，因為如果呼叫tick() 的不是ticker ，而是其他東西，例如：
func();
這時，呼叫tick( ) 的其實是window ，而函數執行時會試圖存取window.n 而出錯。
nStart:100,
step:2
}
作用域鍊和閉包
來看下面的程式碼，並注意我們已經實現了傳入 config 對 ticker 進行自訂。
var n = config.nStart;
function tick(){
你也許會疑惑，怎麼ticker 從物件變成函數了？這是因為 JavaScript 中只有函數具有作用域，從函數體外無法存取函數內部的變數。 ticker() 外訪問 ticker.n 獲得 undefined ，而 tick() 內訪問 n 卻沒有問題。從 tick() 到 ticker() 再到全域，這就是 JavaScript 中的「作用域鏈」。
可是還有問題，那就是－－怎麼呼叫 tick() ？ ticker() 的作用域將 tick() 也掩蓋了起來。解決方法有兩種：
1）將需要調用方法作為返回值，正如我們將遞增n 的方法作為ticker() 的返回值；
var getN;
function ticker(config){ var n = config.nStart;
getN = function(){
n += config.step;
};
}
var tick = ticker({nStart:100,step:2});
tick();
console.log(getN()); // ->102
請看，這時，變數n 就處在「閉包」之中，在ticker() 外部無法直接存取它，但是卻可以透過兩個方法來觀察或操縱它。
在本節第一段程式碼中， ticker() 方法執行之後， n 和tick() 就被銷毀了，直到下一次呼叫該函數時再建立；但是在第二段程式碼中， ticker() 執行之後， n 不會被銷毀，因為tick() 和getN() 可能存取它或改變它，瀏覽器會負責維持n。我對「閉包」的理解就是：用以確保 n 這種處在函數作用域內，函數執行結束後仍需維持，可能被透過其他方式存取的變數 不被銷毀的機制。
可是，我還是覺得不大對勁？如果我需要維持兩個具有相同功能的物件 ticker1 和 ticker2 ，那該怎麼辦？ ticker() 只有一個，總不能再寫一次吧？
new 運算子與建構子
如果透過 new 運算子呼叫一個函數，就會建立一個新的對象，並使用該物件呼叫這個函數。在我的理解中，下面的程式碼中 t1 和 t2 的構造過程是一樣的。
function myClass(){}
var t1 = new myClass();
var t2 = {};
t2.func = myClass;
t2.func();
t2.func = myClass;
t2.func();
t1;是新建構的對象， myClass() 就是建構子了。類似的， ticker() 可以重新寫成。
function TICKER(config){
var n = config.nStart;
this.getN = function(){
n += config.step;
}
}
ticker1.tick();
console.log(ticker1.getN()); // ->102
console.log(ticker1.getN()); // ->102
var ticker2 = new TICKER({nStart:20,step:3});
ticker2.tick();
ticker2.tick();
console.log(ticker2.getN()); // ->26
習慣上，建構函數採用大寫。注意， TICKER() 仍然是個函數，而不是個純粹的對象（之所以說“純粹”，是因為函數實際上也是對象， TICKER() 是函數對象），閉包依舊有效，我們無法訪問ticker1.n 。
原型 prototype 與繼承
上面這個 TICKER() 還是有缺陷，那就是， ticker1.tick() 和 ticker2.tick() 是互相獨立的！請看，每使用new 運算子呼叫TICKER() ，就會產生一個新的物件並產生一個新的函式綁定在這個新的物件上，每建構一個新的對象，瀏覽器就要開闢一塊空間，儲存tick() 本身和tick() 中的變量，這不是我們所期望的。我們期望 ticker1.tick 和 ticker2.tick 指向同一個函數物件。
這就需要引入原型。
JavaScript 中，除了 Object 對象，其他物件都有一個 prototype 屬性，這個屬性指向另一個物件。這「另一個對象」依舊有其原型對象，並形成原型鏈，最終指向 Object 對象。在某個物件上呼叫某方法時，如果發現這個物件沒有指定的方法，那就在原型鏈上一次找這個方法，直到 Object 物件。
函數也是對象，因此函數也有原型對象。當一個函數被宣告出來時（也就是當函數物件被定義出來時），就會產生一個新的對象，這個物件的 prototype 屬性指向 Object 對象，而且這個物件的 constructor 屬性指向函數物件。
透過建構函式建構出的新對象，其原型指向建構函式的原型對象。所以我們可以在建構函數的原型物件上加入函數，這些函數就不是依賴 ticker1 或 ticker2 ，而是依賴 TICKER 了。
你也許會這樣做：
function TICKER(config){
var n = config.nStart;
}
TICKER.prototype.getN = function{
// attention : invalid implementation
return n;
};
TICKER.prototype.tick = function{
// attention : invalid implementation
n += config.step;
};
請注意，這是無效的實作。因為原型物件的方法不能存取閉包中的內容，也就是變數 n 。 TICK() 方法運作之後無法再存取 n ，瀏覽器會將 n 銷毀。為了存取閉包中的內容，物件必須有一些簡潔的依賴實例的方法，來存取閉包中的內容，然後在其 prototype 上定義複雜的公有方法來實現邏輯。實際上，例子中的 tick() 方法就已經夠簡潔了，我們還是把它放回 TICKER 中吧。下面實作一個複雜些的方法 tickTimes() ，它將允許呼叫者指定呼叫 tick() 的次數。
function TICKER(config){
var n = config.nStart;
this.getN = function(){
n += config.step;
} ;
}
TICKER.prototype.tickTimes = function(n){
while(n>0){
new TICKER({nStart: 100,step:2});
ticker1.tick();
console.log(ticker1.getN()); // ->102
var ticker2 = new TICKER({nStart:20,step:3});
ticker2.tickTimes(2);
console.log(ticker2.getN()); // ->26
這個TICKER 就很好了。它封裝了 n ，從物件外部無法直接改變它，而複雜的函數 tickTimes() 被定義在原型上，這個函數透過呼叫實例的小函數來操作物件中的資料。
所以，為了維持物件的封裝性，我的建議是，將對資料的操作解耦為盡可能小的單元函數，在建構函數中定義為依賴實例的（很多地方也稱之為「私有」的），而將複雜的邏輯實現在原型上（即「公有」的）。
最後再說一些關於繼承的話。實際上，當我們在原型上定義函數時，我們就已經使用了繼承！ JavaScript 中的繼承比 C++ 中的繼承更……呃……簡單，或者說簡陋。在C++ 中，我們可能會定義一個animal 類別表示動物，然後再定義bird 類別繼承animal 類別表示鳥類，但我想討論的不是這樣的繼承（雖然這樣的繼承在JavaScript 中也可以實現）；我想討論的繼承在C++ 中將是，定義一個animal 類，然後實例化了一個myAnimal 物件。對，這在 C++ 裡就是實例化，但在 JavaScript 中是被當作繼承來對待的。
JavaScript 不支援類，瀏覽器只管目前有哪些對象，而不會額外費心地去管，這些對像是什麼 class 的，應該具有怎樣的結構。在我們的例子中， TICKER() 是個函數對象，我們可以對其賦值（TICKER=1），將其刪除（TICKER=undefined），但是正因為目前有ticker1 和ticker2 兩個物件是透過new 運算符呼叫它而來的， TICKER() 就扮演了建構子的作用，而TICKER.prototype 對象，也就扮演了類別的作用。
