cloudio™

prototype是什麼呢？

英文翻譯起來是原形的意思…

廢話~

prototype可以做什麼呢？

它可以實做的東西就有趣多了

先前cloudio的用javascript寫物件中有一個小範例是用來

建立一個物件並且讓此物件擁有欄位跟方法

其中的方法其實是可以抽離此物件的

當您將當中的方法從物件裡拿出來代表了當您實做此物件時該方法不會馬上被建立

這樣可以增加一點效能

做法如下

	employee = function(name, age) {
    this.name = name;
    this.age = age;
}
employee.prototype.talkToYou = function talkToYou() {
    alert("hello I'm " + this.name + " I'm " + this.age + " years old");
}
var cloudio = new employee("cloudio", "27");
cloudio.talkToYou();

這樣簡單一個小動作代表了未來當您的employee物件實例化並不會一併建立talkToYou這個方法

需要等到該實例呼叫了這個talkToYou才會真的建立執行此方法

當然prototype也可以傳入新的物件而並非只能傳入方法

例如剛剛的code新增 

	employee.prototype.Car = { first: "toyota", second: "lexus" }
alert(cloudio.Car.first);

那麼cloudio的第一台車是toyota

第二台車是lexus

是不是感覺有點像列舉(enum)？

再來拿bibby大大的範例來做另一個實驗

如果我們改寫成 

	Array.prototype.SortMode = { numeric: function stortNumber(a, b) {
    return a.replace('s', '') - b.replace('s', '');
}

將stortNumber掛到Array物件的Mode底下呢？

那麼未來您要呼叫sort並傳入sortfunction的話只要 

	arr.sort(arr.SortMode.numeric)

是不是輕鬆又快樂？

當然您如果繼續擴充Mode裡的物件的話未來SortMode可選的選項又更多了

最後來到重頭戲

就是用prototype來玩繼承

首先建立一個動物的類別 

	animal = function() {
    this.eat = function() {
        alert("動物吃東西");
    }
    this.walk = function() {
        alert("動物會走路");
    }
}

再建立一個狗的類別 

	dog = function() {
    this.play = function() {
        alert("狗喜歡玩球囧oz");
    }
}

想當然狗要繼承動物囉

那要怎麼繼承？

很簡單~只要輸入這樣的code

	dog.prototype = new animal; 

dog的原形是動物！！

那就來實驗囉

	var bill = new dog();
bill.play();
bill.eat();  

當我實做狗這個物件並呼叫play這方法他會alert出狗喜歡玩球

再呼叫動物類別中的eat那個會alert出動物吃東西

這邊因為狗的類別繼承了動物的類別所以他也能叫用eat的方法

您可以注意到我並沒有在狗的類別中增加eat的方法...

但是他實際上是有的

那如果狗走路的方法不一樣呢？

這邊我又幫狗加了他自己特殊的走路方法在該類別中

	this.walk = function() {
    alert("狗都用跑的啦");
}

以後當我呼叫dog.walk他就不再alert動物會走路而是呼叫最特定的方法也就是dog類別中的walk

除非dog類別中沒有walk他才會叫用父類別的該方法