鍍金池/ 問答/HTML/ es6 多重繼承

es6 多重繼承

我在阮一峰的es6教程中看到使用mixin模式,實(shí)現(xiàn)多重繼承。mixins是一個被繼承類數(shù)組。我不太明白為什么 copyProperties(Mix, mixin); 可以拷貝實(shí)例屬性。mixin打印mixin的key只有l(wèi)ength,prototype和name取不到其創(chuàng)建的屬性
例如 class a{constructor(){this.age=16}
console.log(Reflect.ownKeys(a))//length,prototype,name,不會取到age
clipboard.png
原文地址
http://es6.ruanyifeng.com/#do...

回答
編輯回答
孤巷

事實(shí)就是不能實(shí)現(xiàn)的,如果是下面這兩種情況,都是綁定在構(gòu)造函數(shù)中的,阮一峰那種方法很明顯不能用。

class A {
    age = 20;
    getAge = () => {
        return this.age;
    }
}

這種寫法其實(shí)等價(jià)于:

function A() {
    this.age = 20;
    this.getAge = function() {
        return this.age;
    }
}

這種情況下是無法拿到age和getAge的,我最近也在想這個多重繼承的問題,我能想到的是手動實(shí)現(xiàn)extends,實(shí)現(xiàn)Child -> Parent1 -> Parent2 -> Parent3這樣的原型鏈,我參考了babel后的extends的實(shí)現(xiàn)。

class Child {
    name = "111"
    constructor() {
        Child.__proto__.apply(this, arguments);
    }
}
class Parent1 {
    name = "222"
    constructor() {
        Parent1.__proto__.apply(this, arguments);
    }
}
class Parent2 {
    name = "333"
    constructor() {
        Parent2.__proto__.apply(this, arguments);
    }
}
Child.__proto__ = Parent1;
Parent1.__proto__ = Parent2;
Child.prototype.__proto__ = Parent1.prototype;
Parent1.prototype__proto__ = Parent2.prototype;

這里可以實(shí)現(xiàn)一個Mixin的方法,通過reduce實(shí)現(xiàn)上面繁瑣的步驟。
但是有兩個問題,一個是要在類的constructor里面使用apply,另一個是父類的屬性會覆蓋子類的屬性,比如上面的name屬性,除非把name手動的在constructor里面寫到apply后面,這個其實(shí)就是《js高級程序設(shè)計(jì)》里面組合繼承的借用構(gòu)造函數(shù)。
如果全部使用ES5的寫法,這個多重繼承是沒啥問題的,但是用ES6這樣寫的話會很不優(yōu)雅,也不完美,我目前還沒想到好的解決方案。

2017年5月1日 17:01
編輯回答
避風(fēng)港
class A{
        constructor(){
            thia.age=1;
        }
        static get A(){
            return 1;
        }
    }
    A.s=1;
    console.log(Reflect.ownKeys(A));

Reflect.ownKeys從方法上就知道是取對象本身上的可枚舉屬性 而函數(shù)其實(shí)是一個有[[call]]的對象 class是function的語法糖 所以這時(shí)候取的就是class本身的屬性 而不是實(shí)力的屬性 基本可以理解為靜態(tài)屬性/方法

2018年3月6日 06:20