prototype.js 讓你更深入的瞭解javascript的物件導向特性

js是一門很強大的語言，靈活，方便。 目前我接觸到的語言當中，從文法角度上講，只有 Ruby 比它更爽。

不過我接觸的動態語言只有： js ruby python flash的as 簡單的幾門， 應該算是井底之蛙之見。

js 文法成分簡單，沒有 ruby 語言複雜。所以有時候我覺得她更乾淨（Ruby Fans 不要攻擊我哦，我也是很愛很愛很愛Ruby的）！

Prototype.js 無疑是 js的漂亮之作，從它身上應該可以學到一些東西。

如果你用 js 在頁面僅僅能寫出 if, alert等簡單的驗證代碼，或者想多瞭解一下Js, 那麼此文可能對你有協助。

好了，開始吧。

現在我突然想起了 Thinking in java 中的 "一切皆是對像"， 其實我覺得這句話 有點不適合 java 反倒是更適合 js

1.怎樣構造(初始化)對象?

js 代碼 

1. var Prototype = {   
2.   Version: '1.5.0_rc1',   
3.   ScriptFragment: '(?:)((\n|\r|.)*?)(?:<\/script>)',   
4.   
5.   emptyFunction: function() {},   
6.   K: function(x) {return x}   
7. }   

就這樣，初始化了一個對象(名字就叫 Prototype)，以及對象的四個成員: Version, ScriptFragment, emptyFunction, K

我們也來試試:

js 代碼 

1. var bbs = {   
2.  name: 'JavaEye',   
3.  version: '2.0',   
4.  describe: "做最棒的軟體開發交流區",   
5.  sayHello: function() { alert("hello, i'm javaeye! ") }   
6. }  

於是你可以這樣使用： bbs.name 或 bbs.sayHello()

看到嗎？ sayHello 是一個方法哦，不要驚慌，"一切都是對象"，所以它和 name 是一樣的，只不過初始化，或定義的文法不一樣。想起 js 中的Regex中的那兩個杆杆了嗎？ 可愛吧！

方法是對象，所以它可以被當作參數傳遞，或者作為方法的傳回值。

所以 Prototype 中有一個 Version 屬性，還有一個匹配 script 的正則式字串， 一個空方法emptyFunction，還有一個方法 K, 它僅僅返回參數。

沒問題吧，繼續！

2. 建構函式？

先讓我們寫段代碼吧(中學時，我語文極差(大學沒語文了)，我想寫代碼讓你們明白我心裡真實的想法)：

js 代碼 

1. var Person = function(name) { // 這裡 Person 是一個方法   
2.  this.name = name;   
3. }   
4. var bencode = new Persion("bencode");  // 這裡像Java吧！   
5. alert(bencode.name);  

先看結果：
從 alert(bencode.name); 可以知道，bencode是對象， 而 name 就是 bencode 的屬性， 它被正確地初始化為 "bencode"

所以 var bencode = new Persion("bencode"); 就是構造了一個新的對象，Person() 相當於建構函式

所以 new 這個關鍵字， 就是構造一個新的對象，並且在這個對象上調用相應的方法，並將這個對象返回。

按上面說： 方法 如果用在 在 new 後面，就相當於成了建構函式了。

話又說回來了， 如果 var bencode = new Persion("bencode") 是 構造了一個對象，像Java, 那麼 Person 是不是類呢？
可是 Person 不是方法嗎？ 可是方法不也是對象嗎？ 類也是對象？

一切皆對象?

本來無一物！

好了，看 Prototype.js吧

js 代碼 

1. var Class = {   
2.   create: function() {   
3.     return function() {   
4.       this.initialize.apply(this, arguments);   
5.     }   
6.   }   
7. }  

初始化一個 Class 對象， 它有一個成員，是一個方法， 這個方法返因另一個方法（方法是對象，所以可以作為參數或者傳回值）

所以如果我們這麼做： 

js 代碼 

1. var A = Class.create(); // 此時 A 是一個方法，方法體，下面解釋   
2. var a = new A(...);  // 對方法使用 new 操作符，就是構造一個新的對象，然後在這個對象上調用這個方法( 現在是 A)  

上面分析說？ A相當於類， 哈哈 Class.create();  // 終於名副其實
var a = new A(...);  // 也是相當地直觀， 就是構造一個新的對象，類型 是A

new 操作符構造了對象，並調用了 方法， 這個方法到底做了什麼呢？ 也就是上面沒有分析的東東，看看先：

js 代碼 

1. var Class = {   
2.   create: function() {   
3.     return function() {  // 見[1]   
4.       this.initialize.apply(this, arguments);  // 見[2]   
5.     }   
6.   }    
7. }  

[1]. new 操作符，就會在新產生的對象上調用這個方法
[2]. 哦？ 這裡就是調用 this 對象上的 initialize方法， 並傳遞 arguments
  換句話說，就是把構造的任務委託給 initialize 方法
  initialize? 哪裡來？ 見下面，類的擴充(繼承)
  
3. Prototype?

看段老代碼：

js 代碼 

1. var Person = function(name) {   
2.  this.name = name;   
3. }   
4. var bencode = new Person("bencode");  

bencode不是一個自閉的人，他應該可以向javaeye介紹一下自己。
像這樣：

js 代碼

1. bencode.sayHello();   

 
假如不能實現以上功能的話， 上面的 new，上面所有的東東都等於垃圾。

所以。需要給 Person 類加"執行個體方法"

題外話： 靜態方法如何添加？ 看上面的 Class.create, 僅僅是一個對象的成員而已

好， 再來一段 (為了完整性，上面的幾句話，再抄一次)

js 代碼 

1. var Person = function(name) {   
2.  this.name = name;   
3. }   
4. Person.prototype = {  // protype 是啥?   
5.  sayHello: function() {   
6.   alert("hi, javaeye, I'm " + this.name);   
7.  }   
8. }   
9. var bencode = new Person("bencode");   
10. bencode.sayHello();  

運行代碼，通過！

prototype是啥？ 請暫時忘記 Prototype(prototype.js) 這個庫，名字一樣而已！

讓我們再從結果上去分析（第一次我們用這種方法分析而得出了 new 的作用），

我們在思考：
 要想 bencode.sayHello() 正常運行
 bencode 是一個對象, 這是我們已經知道的
 sayHello() 應該是 bencode 這個對象的方法才可以
 
 可是bencode 這個對象是 new 操作符產生的, 而 new 此時作用於 Person 這個 "類"
 那麼， 哦？ 那麼有兩種可能:
 1. new 產生的那個新對象是不是就是 Person.prototype
 2. Person.prototype 中的成員 將會被 new 操作符添加到 新產生的對象中

再看:

js 代碼 

1. Person.prototype = {   
2.  sayHello: function() {   
3.   alert("hi, javaeye, I'm " + this.name); // 這裡有this   
4.  }   
5. }  

this.name, 這裡的 this 指什嗎？所以第一個可能講不通呀

回憶起這段：

js 代碼 

1. var Person = function(name) {   
2.  this.name = name;   
3. }  

如果這裡的 this 代表著新產生的對象的話。
那麼第二種情況就講得通了， new 將會把 Person.prototype 這個對象的成員放到 這個新對象中。 與當前行為相符。

所以： Person 的 Prototype 對象中的 成員, 將會被添加到 新產生的對象 中(我是這樣理解的)
(不知道 Js解譯器是不是開源的， 有空我得去看看，怎麼實現的。)

嘿，預設的 Prototype 就是 Object 哦！

4. 擴充？繼承？

什麼是擴充？啥是繼承？ ! 我從爸爸那得到了什嗎？
想不通！

還是實際點：

有一個類A, 它有一個 sayHello方法

js 代碼 

1. var A = function() {   
2. }   
3.   
4. A.prototype = {   
5.  sayHello: function() {   
6.   alert("sayHello A")   
7.  }   
8. }   

我想構造一個 B 類，讓他繼承 A 對象， 這句話太抽象。

其實我們可能想這樣：

js 代碼 

1. var b = new B();   
2. b.sayHello();  // 調用 A 的 sayHello  

這應該是繼承的第一層含義（重用）

怎麼辦到呢？

var B = function() { // 這裡是有一個B類了
}

怎麼樣添加"執行個體方法"?  快點想起 Prototype!!!

B.prototype = A.prototype

這樣行了嗎？ 恭喜, 運行通過！

讓我們整合一次

js 代碼 

1. var A = function() {   
2. }   
3. A.prototype = {   
4.  sayHello: function() {   
5.   alert("sayHello A");   
6.  }   
7. }   
8.   
9. var B = function() {   
10. }   
11. B.prototype = A.prototype;   
12.   
13. var b = new B();   
14. b.sayHello();    

可是如果 B 是這樣呢?

js 代碼 

1. var B = function() {   
2. }   
3. B.prototype = {   
4.  sayHi: function() {   
5.   alert("sayHi B");   
6.  }   
7. }  

我們是不是應該將 A.prototype 中的內容添加到 B.prototype 對象中，而不是代替它呢？ 當然。

這樣才能"擴充"

題外話？多態在哪裡？ 嘿嘿

好了，足夠多了， 那prototype.js 是怎麼樣"擴充"的呢？

js 代碼 

1. Object.extend = function(destination, source) {   
2.   for (var property in source) {   
3.     destination[property] = source[property];   
4.   }   
5.   return destination;   
6. }  

這個只是簡單地把 source 的成員， 添加到 destination 對象中嘛, 哪裡看得出擴充？

如果我這樣呢？

js 代碼 

1. var A = function() {   
2. }   
3. A.prototype = {   
4.  sayHello: function() {   
5.   alert("sayHello A")   
6.  }   
7. }   
8.   
9. var B = function() {   
10. }   
11. Object.extend(B.prototype, A.prototype); // 先添加父類(A)成員   
12. Object.extend(B.prototype, { // 再添加B類成員, 如果是同名，則覆蓋，行為符合 "多態"   
13.  sayHi: function() {   
14.   alert("sayHi B");   
15.  }   
16. });   

回憶剛才的 Class.create()：

js 代碼 

1. var Person = Class.create();   
2. var bencode = new Person("bencode");  

剛才說過， 調用 new 時， 將會建立一個新對象，並且調用 Person 方法， Person 方法會委託給 "新產生對象"的 initialize方法

怎麼樣給新產生對象添加 initialize 方法？ 哈哈，輕鬆

js 代碼 

1. Object.extend(Person.prototype, {   
2.  initialize: function() {   
3.   this.name = name;   
4.  } //,   
5.  // 下面可以添加其他執行個體方法。   
6. });  

所以， 我們使用 Prototype 建立類一般格式是這樣的：

js 代碼 

1. var ClassName = Class.create();   
2. Object.extend(ClassName.prototype, {   
3.  initialize: function(...) { // 這就相當於建構函式   
4.  }   
5.  //...   
6. });  

如果我們要繼承一個類，只要：

js 代碼 

1. var ClassName = Class.create();   
2. Object.extend(ClassName.prototype, SuperClassName.prototype);   
3. Object.extend(ClassName.prototype, {   
4.  initialize: function(...) {   
5.  }   
6.  //...   
7. });  

物件導向部分基本上就這樣。

希望對大家有點協助!

本來想再接著寫 Prototype.js 的源碼解讀，但一來是因為時間，第二是發現也沒有這個必要。
這種東西是看起來快，寫起來慢的。哈哈!

原文地址：http://www.javaeye.com/topic/57760