iT邦幫忙

8

JavaScript輕鬆聊(1)-說說繼承觀念

說到JavaScript的繼承觀念,其實很容易讓人混亂,原因它沒有一般人熟悉的class 的extends機制來處理繼承,而是用了多數人陌生的prototype的機制,因此很容易在JavaScript迷宮中走不出來。
所謂的繼承,就其程式語言來說,就是子類別接收了父類別的屬性和方法。

例如 Dog類別 extends 了Animal類別一樣。

而Animal類別定義的一些屬性和方法,Dog就可以拿來用了,不用自己寫。

由於JavaScript沒有類別,因此就缺少了extends這樣的機制。

而它採行的,是所謂原型繼承的方式。

如果以上例來說,Dog的繼承Animal的方法會是:

Dog.prototype = new Animal();

這樣一來,Dog透過prototype,就會擁有Animal的屬性和方法。

如果遇到父類別預設有參數,由於在new Animal給Prototype時,不能餵參數給Animal。因此就得尋他法來解決。

解法可以是下面的作法 (以下的動物的行為大概只會出現在卡通中,純示範作用):

//動物有名字的屬性
function Animal(name){
  this.name = name;
}

//動物都會睡覺吧
Animal.prototype.sleep = function(){
  console.log("我正在睡覺");
}

//動物都會告訴人家自己的名字(歐飛)
Animal.prototype.tellName = function(){
  console.log("我的名字叫"+this.name);
}

//換小狗登場
function Dog(name,feet){
  this.feet = feet;
  Animal.call(this,name);
}

Dog.prototype = new Animal();

var theDog = new Dog("小黃",4)

theDog.sleep();

theDog.tellName();

執行結果,可以看到小狗睡覺時會說夢話,還會告訴大家自己的名字。

就是這樣,小狗並沒有自己寫關於名字的屬性以及說夢話和自報姓名的方法,而是從Animal那裡拿來的。這樣的設計方式,在開發時可以有效地減少重複的程式碼。


1 則留言

0
chetbaker
iT邦新手 3 級 ‧ 2012-07-11 11:50:42

Yes!活動的頭香入手!!

ted99tw iT邦高手 1 級 ‧ 2012-07-11 15:26:52 檢舉

推+1
讚讚

我要留言

立即登入留言