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

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等屬性。

2.繼承的運作原理

當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!"

3.覆寫原型

從原型繼承來的方法可以被覆寫,只需要把自訂的方法放入該物件即可。

例如,把自訂的meow方法放入kitty物件,kitty就可以有自己的叫法。

而如此一來,就可在kitty實體找到meow方法,不用到原型去找。

// 承上述程式碼
kitty.meow = function() {
  console.log(this.name + " says WANG!");
};
// "Kitty says WANG!"
// kitty就可以汪汪叫囉!(咦?)

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

本文同步發表於iT邦幫忙

Recent post