Javascript 中的類和閉包

有人說javascript也是物件導向的，只是它是prototype based,當然這隻是概念上的區別，我不想討論js是不是物件導向的，關鍵是想說明雖然javascript的類表現得很像其他語言中的類，但是內部的實現機理確不太一致，如果一味的把javascript中的類類比作其他語言中的類，有時候腦子會犯混。

先看一段簡單的代碼，一般教材上介紹如何建立一個類的時候都是這樣的（當然還有更複雜的方法，不過本質上是一樣的）： 複製代碼 代碼如下:function MyClass(x) {
this.x = x;
}
var obj = new MyClass('Hello class');
alert(obj.x);

毫無疑問，此時obj具有一個x屬性，現在的值是 Hello class. 但是，obj到底是什嗎？MyClass僅僅是一個函數而已，我們稱之為建構函式。在其他OO的語言中，建構函式是要放在class關鍵字內部的，也就是先要聲明一個類。另外，函數體內的this又是什嗎？其他OO語言中，this的概念是很明確的，就是當前對象，因為它在建構函式執行之前已經聲明了類，類的內部的一些欄位都是已經定義好的。

先解釋下，在javascript的函數中，this關鍵字表示的是調用該函數的範圍（scope），範圍的概念也不是太好理解，下面再解釋。不過可以簡單的認為它是調用函數的對象。再看MyClass函數，它內部的this是什麼呢？

如果我們把代碼改成： 複製代碼 代碼如下:var obj = MyClass('Hello class');

這是完全合乎文法的。如果這段代碼是在瀏覽器中啟動並執行，調試一下可以發現,this是window對象。而和obj沒有任何關係，obj還是undefined，alert也不會有結果。原來的代碼之所以可以工作，都是new關鍵字的功勞。new關鍵字把一個普通的函數變成了建構函式。也就是說，MyClass還是一個普通的函數，它之所以能構造出一個obj，基本上是new的功勞。當函數之前有new關鍵字的時候，javascript會創造一個匿名對象，並且把當前函數的範圍設定為這個匿名對象。然後在那個函數內部引用this的話就是引用的這個匿名對象，最後，即使這個函數沒有return，它也會把這個匿名對象返回出去。那麼obj自然就具有了x屬性。

現在這個MyClass已經有點像一個類了。但是，這並不是new的工作的全部。Javascript同樣可以方便的實現繼承——依靠是prototype.prototype也是一個對象，畢竟除了原始類型，所有的東西都是對象，包括函數。更為重要的是，前面提到javascript是prototype based，它的含義就是在javascript中沒有類的概念，類是不存在的，一個函數，它之所以表現的像類，就是靠的prototype. prototype可以有各種屬性，也包括函數。上一段說的new在構造對象的過程中，在最終返回那個匿名對象之前，還會把那個函數的prototype中的屬性一一複製給這個對象。這裡的複製是複製的引用，而不是建立的一個對象，把內容複寫過來，在其內部，相當於保留了一個構造它的函數的prototype的引用。有些教材含糊的說所有的“所有對象都有一個prototype屬性”，這種說法是不確切的，雖然它內部確實有一個prototype屬性，但是對外是不可見的。只有函數對象是有prototype屬性的，函數對象的prototype預設有一個constructor屬性。

看如下的代碼： 複製代碼 代碼如下:function MyClass(x) {
this.x = x;
}
var proObj = new MyClass('x');
InheritClass.prototype = proObj;
MyClass.prototype.protox = 'xxx';
function InheritClass(y) {
this.y = y;
}
var obj = new InheritClass('Hello class');
MyClass.prototype.protox = 'changed';
proObj.x = 'Changed Too';
alert(obj.protox);
alert(obj.x);

輸出的結果是changed和Changed Too。此代碼說明了對象內部保留的是建構函式的prototype的引用，要注意的是，proObj中也是保留的它的建構函式的prototype的引用。如果把代碼改成： 複製代碼 代碼如下:var obj = new InheritClass('Hello class');
proObj.protox = 'I am winner';
MyClass.prototype.protox = 'changed';
proObj.x = 'Changed Too';
alert(obj.protox);
alert(obj.x);

輸出的就是 I am winner 和 Changed Too了。事實上，這些prototype逐層引用，構成了一個prototype鏈。當讀取一個對象的屬性的時候，首先尋找自己定義的屬性，如果沒有，就逐層向內部隱含的prototype屬性尋找。但是在寫屬性的時候，就會把它的引用覆蓋掉，是不會影響prototype的值的。
再介紹閉包，首先說明下，這裡的閉包（closure）和離散數學中關係的傳遞閉包中的不是一個概念，我曾以為他們之間有關聯，後來仔細想想，似乎並無什麼關聯，恰好名字一樣而已。先看定義：
Closure
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
要完全理解閉包需要對Javascript函數的機理有比較透徹的理解，而這個機理有點複雜，並不是三言兩語能講清的，有興趣的朋友可以看這裡 Javascript clousures. 即使是這篇文章，也只是大概講了下原理。大意就是任何一個函數調用都在一個運行上下文（Execution Context）中執行的，這個上下文中有一個範圍對象，其中包括了這個函數的局部變數、參數等。另外，如果一個函數是一個內建函式，它的範圍中含有它外部函數的範圍。在內建函式遇到一個變數名的時候，它是從內部的範圍找起，不斷往外層的範圍找。因此，如果內建函式作為一個對象返回出外部函數的時候，即使外部函數已經執行完畢，但是由於其內建函式仍有引用指向它，內建函式不會被釋放，因為內建函式有外部函數的範圍，因此外部函數的局部變數也不會被釋放。這就構成了閉包。