iT邦幫忙

2022 iThome 鐵人賽

0
Modern Web

就是要搞懂 JavaScript 啦!系列 第 41

Day41 Prototype OOP 混合:不需要繼承的繼承

  • 分享至 

  • xImage
  •  

前面已經提到,繼承最大的優點就是提高程式的複用性,減少重複程式碼。但從反向來看,其缺點也在於上層物件與下層物件之間高度關聯性,改動原型鍊上層物件的內容會影響到下層物件,也就是高耦合的問題。

因此使用繼承時,除了盡量保持只有一層繼承關係,不讓程式碼變得過於複雜以外,另一項通則則是「組合優於繼承(Favor Composition over Inheritance)」。

物件組合不但具備繼承減少重複程式碼的特性,同時也降低了程式碼耦合性,可說是兼具兩者的優點,而這樣的設計方法便稱為「混合(Mixins)」。

混合的範例:

const canEat = {
  eat: function () {
    this.hunger--;
    console.log("eating");
  }
}
const canWalk = {
  walk: function () {
    console.log("walking");
  }
}
const canSwim = {
  swim: function () {
    console.log("swimming");
  }
}

function mixin(target, ...sources) {
  Object.assign(target, ...sources);
}

function Person() { }
mixin(Person.prototype, canEat, canWalk)
const person = new Person();
person.eat(); // eating
person.walk(); // walking

function Fish() { }
mixin(Fish.prototype, canEat, canSwim);
const fish = new Fish();
fish.eat(); // eating
fish.swim(); // swimming

如上程式碼中分別定義了三個包含方法的物件:canEatcanWalkcanSwim,又分別只撿選想要的物件,利用 Object.assign 混合成到建構子的 prototype 上,如此一來物件就能只繼承想要的屬性或方法,而不再受到上層物件的影響,同時也做到減少重複程式碼。


參考資料


上一篇
Day40 Prototype OOP 多型:同胞手足各有所長
下一篇
Day42 Prototype 遮蔽:一葉障目,不見泰山
系列文
就是要搞懂 JavaScript 啦!73
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言