理解Javascript中類的定義

 

關於如何在Javascript中定義類，網上可以找到不少的文章。在開始講之前，還是先來看看定義類的兩種基本方式吧：

(1) 利用函數構造類型。

function Foo(text, url) {this.text = text;this.url = url;this.render = function() {document.write('<a href="' + this.url + '">' + this.text + '</a>');}}

(2) 利用原型prototype。

function Bar(text, url) {this.text = text;this.url = url;}Bar.prototype = {render : function() {document.write('<a href="' + this.url + '">' + this.text + '</a>');}}

　　代碼並不複雜，相信大多數人看完之後都會曉得怎麼使用了。但是當我第一次看到這種類的定義方式的時候覺得很奇怪，很長一段時間裡都是知其然而不知其所以然。如果你有和我一樣的困惑，也許可以分享一下我的一點經驗。

　　先來看看怎麼使用定義好的類型，

var a = new Foo('Link A', 'http://www.cnblogs.com');var b = new Bar('Link B', 'http://www.csdn.net');a.render();b.render();

　　跟很多物件導向語言（如C#）的使用方法一樣，都是使用new關鍵字執行個體化類，而且當你用instanceof來測試它們是不是相應類型時，都可以得到預望的答案。兩種不同方式定義出來的類型Foo和Bar很多時候使用起來並沒有什麼不同。

　　但它們在原理上是完全不同，方式１,是在建構函式中動態中建立類的成員，這就意味著每個Foo的執行個體它們的render方法其實是兩個完全獨立的函數；而方式２,則是通過原型prototype的方式將類的共用成員與類的執行個體綁定在一起，所以每個Bar執行個體的render方法都是指向同一個方法，它是靜態。請看以下代碼：

document.write(Object.prototype==String.prototype);var c = new Foo('Link C', 'http://www.asp.net');document.write(c.render == a.render);  // falsevar d = new Bar('Link D', 'http://www.klesh.cn);document.write(d.render == b.render);  // true

　　Foo在執行個體化後就是一個獨立的個體，它的任何改動不會影響到原來的類型定義，也不會影響到其他的執行個體；而Bar則不同，它的所有執行個體都依然受prototype的影響，通過對Bar.prototype的修改或擴充，可以影響到所有包括已經執行個體化的執行個體。回過頭來看Foo，由於它的成員，特別是成員函數是動態建立的，利用閉包，則可以類比物件導向中的“私人成員”，這一點內容會很長，稍後有時間再和大家分享。

　　兩種方式各有特點。但是最後，嚴格來說，無論什麼方式，都只能說是“類比自訂類型”，因為在基於對象的Javascript中，它事實上是沒有原生的“自訂類型”的概念的（這一點也很長，暫不細說）。

　　最後推薦大家一般使用方式２來在Javascript類比自訂類，一來，速度上會比較快，而且還可以通過prototype對類型進行修改， 除非你有需要到“私人成員”（好像也有人叫“閉包“）…… 除非你有需要用到閉包來類比“私人成員”。

刪除線和斜體部分根據木野狐同志的意見修正。