JS-ES5模擬super與多級繼承(三)

VioletJack 發(fā)布于2019-08-22 14:06 / 2114人閱讀

摘要：參考文章多層繼承方法參考文章中提供了一個思路不一定要是一個變量也可以是一個函數(shù)只要它能返回我們期望的父級對象就可以了下面是我對它給出的源碼的一些修改和注釋另外有個測試示例要想擁有方法必須繼承類注意方法中不要再在時為子類添加指向父類本身的屬

參考文章

js多層繼承 super方法

參考文章1中提供了一個思路, _super不一定要是一個變量, 也可以是一個函數(shù), 只要它能返回我們期望的父級對象就可以了. 下面是我對它給出的源碼的一些修改和注釋, 另外有3個測試示例.

/*
 * @author: general
 * @github: https://gist.github.com/generals-space/a75cfca06e1f8d463022e0e02446c363
 */
/*
 * 要想擁有_super()方法, 必須繼承SuperExtend類.
 * 注意: 
 * 1. inherits方法中不要再在assign時為子類添加指向父類本身的屬性了, 會出問題的.
 * 2. 當(dāng)需要使用_super()方法調(diào)用父類的某個方法時, 必須要保證子類有同名方法, 需要通過子類的方法調(diào)用父類方法才行
 */
function SuperExtend(){}
SuperExtend.prototype._super = function(){
    // caller調(diào)用者應(yīng)該會是子類的成員方法對象, 或是子類構(gòu)造函數(shù)本身
    var caller = arguments.callee.caller;
    // 這里先得到this所屬的構(gòu)造函數(shù)類
    var chain = this.constructor;
    var parent = null;
    // 沿繼承鏈一直向上遍歷, 至少要遍歷到SuperExtend的第一個子類
    // 目標(biāo)是**找到主調(diào)函數(shù)到底屬于繼承鏈上的哪一層級, 然后才能得到這個調(diào)用者的父類, 也就是我們需要的super對象**
    while(chain && chain.prototype){
        // 對象的隱式原型`__proto__`屬性是一個指針, 它指向**構(gòu)造本對象的**, **構(gòu)造函數(shù)類**, **的原型**.
        // 但是由于inherits的自定義繼承機(jī)制, chain.__proto__指向的是父級構(gòu)造函數(shù)類(chain本身為子級構(gòu)造函數(shù)類)
        parent = chain.__proto__;
        // 如果調(diào)用者正好是構(gòu)造函數(shù)類本身, 說明是在構(gòu)造函數(shù)類的函數(shù)體中調(diào)用的,
        // 直接返回父級構(gòu)造函數(shù)類本身
        if(caller == chain) return parent;

        // 如果調(diào)用者不是子級構(gòu)造函數(shù)類, 就應(yīng)該是原型中的方法了.
        var props = Object.getOwnPropertyNames(chain.prototype);
        for(var i = 0; i < props.length; i ++){
            // 這里雖然相等, 但有可能是當(dāng)前類從上一層父類繼承而來的屬性, 而當(dāng)前類本身并沒有定義過這個方法.
            // 需要進(jìn)一步確認(rèn), 即確認(rèn)父類原型上沒有與它完全相同的方法(當(dāng)然, 方法名可能一樣).
            if(caller == chain.prototype[props[i]] && caller != parent.prototype[props[i]]){
                return parent.prototype;
            }
        }
        chain = parent;
    }
    return chain;
};
/*
 * function: 自定義通用繼承方法.
 * 使用方法: inherits(子類, 父類)
 */ 
function inherits(subClass, superClass){
    Object.assign(subClass.prototype, superClass.prototype, {
        constructor: subClass,
    });
    // 建立這種聯(lián)系后, 相當(dāng)于subClass成了superClass的實(shí)例了
    // 基本等價于subClass.prototype = superClass
    Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

3個測試示例如下

測試用例1. 基本測試

// 測試用例1. 基本測試
function A(a){
    this.a = a;
}

inherits(A, SuperExtend);

A.prototype.sayHi = function(){
    console.log(this.a);
};

function B(a, b){
    this._super().call(this, a);
    this.b = b;
}

inherits(B, A);

B.prototype.sayHi = function(){
    this._super().sayHi.call(this);
    console.log(this.a, this.b);
};

function C(a, b, c){
    // 這里得到的是父級構(gòu)造函數(shù)類本身, 直接call調(diào)用即可
    this._super().call(this, a, b);
    this.c = c;
}

inherits(C, B);

C.prototype.sayHi = function(){
    // 這里得到的是父級構(gòu)造函數(shù)類的原型對象
    this._super().sayHi.call(this);
    console.log(this.a, this.b, this.c);
};

var c = new C(2, 5, 8);
c.sayHi();

測試用例2. 驗(yàn)證同層級函數(shù)間調(diào)用的情況

// 測試用例2. 驗(yàn)證同層級函數(shù)間調(diào)用的情況
function A(a){
    this.a = a;
}

inherits(A, SuperExtend);

A.prototype.sayA = function(){
    this.sayB();
};

A.prototype.sayB = function(){
    console.log(this.a);
};

function B(a, b){
    this._super().call(this, a);
    this.b = b;
}

inherits(B, A);

B.prototype.sayB = function(){
    this._super().sayB.call(this);
    console.log(this.a, this.b);
};

function C(a, b, c){
    // 這里得到的是父級構(gòu)造函數(shù)類本身, 直接call調(diào)用即可
    this._super().call(this, a, b);
    this.c = c;
}

inherits(C, B);

var c = new C(2, 5, 8);
c.sayA();

測試用例3. 驗(yàn)證主調(diào)函數(shù)與被調(diào)函數(shù)不同名的情況

// 測試用例3. 驗(yàn)證主調(diào)函數(shù)與被調(diào)函數(shù)不同名的情況
function A(a){
    this.a = a;
}

inherits(A, SuperExtend);

A.prototype.sayA = function(){
    console.log(this.a);    
};

function B(a, b){
    this._super().call(this, a);
    this.b = b;
}

inherits(B, A);

B.prototype.sayB = function(){
    this._super().sayA.call(this);
    console.log(this.a, this.b);
};

function C(a, b, c){
    // 這里得到的是父級構(gòu)造函數(shù)類本身, 直接call調(diào)用即可
    this._super().call(this, a, b);
    this.c = c;
}

inherits(C, B);

var c = new C(2, 5, 8);
c.sayB();