填坑十萬個為什麼?(24)

NO IMAGE

簡介:很多概念不清或忘記,重新構建自己的知識體系。每天問自己1~多個問題。我是菜鳥 成為大神之路!

1.Es6 Class通過extends關鍵字實現繼承 Link Class & extends & super

class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 調用父類的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 調用父類的toString()
}
}

①上面代碼中,constructor方法和toString方法之中,都出現了super關鍵字,它在這裡表示父類的構造函數,用來新建父類的this對象。

②子類必須在constructor方法中調用super方法,否則新建實例時會報錯。這是因為子類自己的this對象,必須先通過父類的構造函數完成塑造,得到與父類同樣的實例屬性和方法,然後再對其進行加工,加上子類自己的實例屬性和方法。如果不調用super方法,子類就得不到this對象。

③在子類的構造函數中,只有調用super之後,才可以使用this關鍵字,否則會報錯。這是因為子類實例的構建,基於父類實例,只有super方法才能調用父類實例。

④父類的靜態方法,也會被子類繼承

2.基於Mixin模式實現多繼承 Link Mixin

Mixin 指的是多個對象合成一個新的對象,新對象具有各個組成成員的接口

將多個類的接口“混入”(mix in)另一個類

function mix(...mixins) {
class Mix {}
for (let mixin of mixins) {
copyProperties(Mix.prototype, mixin); // 拷貝實例屬性
copyProperties(Mix.prototype, Reflect.getPrototypeOf(mixin)); // 拷貝原型屬性
}
return Mix;
}
function copyProperties(target, source) {
for (let key of Reflect.ownKeys(source)) { //Reflect.ownKeys()方法返回一個由目標對象自身的屬性鍵組成的數組
if ( key !== "constructor"
&& key !== "prototype"
&& key !== "name"
) {
let desc = Object.getOwnPropertyDescriptor(source, key);//方法返回指定對象上一個自有屬性對應的屬性描述符。(自有屬性指的是直接賦予該對象的屬性,不需要從原型鏈上進行查找的屬性)
Object.defineProperty(target, key, desc);//方法會直接在一個對象上定義一個新屬性,或者修改一個對象的現有屬性, 並返回這個對象。
}
}
}

相關文章

填坑十萬個為什麼?(26)

線程池工具類的封裝

基於Vue的任務節點圖繪製插件(vuetasknode)

填坑十萬個為什麼?(25)