iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
1
自我挑戰組

Head First!從頭開始學JS 《深入淺出 JavaScript 程式設計》讀書筆記系列 第 28

Day28. 這批繼承很不純啊,跟原型長得不一樣

本日閱讀進度:第13章 使用原型(563~580頁)

重點摘要:

  1. 原型是什麼?
    JavaScript物件可以從其他物件繼承屬性和行為。具體來說,JavaScript採用了所謂的原型繼承(prototypal inheritance),而被繼承的物件稱為原型(prototype)。透過原型的使用,可以快速組裝重用程式碼的物件,以及能夠被新行為和屬性擴充的物件。

例如這裡有一個貓原型,是貓科,具有mewo、run、sainai三個方法:

Cat Prototype
specises: "feline"
meow()
run()
sainai()

如果有貓物件kitty繼承自貓原型的話,則kitty會具有這meow、run、sainai三個方法。
kitty也可以自訂其他如name、color等屬性。

  1. 繼承的運作原理
    當kitty呼叫meow方法時,這個方法並不存在kitty實體中,但可以到原型去找到這個方法,讓kitty可以喵喵叫。
function Cat(name, color, age) {
  this.name = name;
  this.color = color;
  this.age = age;
}

Cat.prototype.species = "feline";

Cat.prototype.meow = function() {
  if (this.age < 5) {
    console.log(this.name + " says MEOW!");
  } else {
    console.log(this.name + " says MEOWWWW!");
  }
};

var abui = new Cat("Abui", "orange", 1);
var kitty = new Cat("Kitty", "white", 6);

abui.meow();
kitty.meow();
// "Abui says MEOW!"
// "Kitty says MEOWWWW!"
  1. 覆寫原型
    從原型繼承來的方法可以被覆寫,只需要把自訂的方法放入該物件即可。
    例如,把自訂的meow方法放入kitty物件,kitty就可以有自己的叫法。
    而如此一來,就可在kitty實體找到meow方法,不用到原型去找。
// 承上述程式碼
kitty.meow = function() {
  console.log(this.name + " says WANG!");
};
// "Kitty says WANG!"
// kitty就可以汪汪叫囉!(咦?)

JavaScript的繼承是這本書的最後一章了,明天剛好可以看完,最後一天發表得獎感言,perfect!!

本文同步發表於cichen


上一篇
Day27. 保安!可以讓人這樣改了又改,改了又改嗎?
下一篇
Day29. 明明是媽媽生的,constructor卻說是阿嬤生的
系列文
Head First!從頭開始學JS 《深入淺出 JavaScript 程式設計》讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言