快捷導(dǎo)航

簡單談?wù)凧avaScript寄生式組合繼承

更新時(shí)間：2021年08月09日 14:44:10 作者：大熊G

寄生組合式繼承,是集寄生式繼承和組合繼承的有點(diǎn)與一身,主要是通過借用構(gòu)造函數(shù)來繼承屬性,通過原型鏈的混成形式來繼承方法,這篇文章主要給大家介紹了關(guān)于JavaScript寄生式組合繼承的相關(guān)資料,需要的朋友可以參考下

組合繼承

組合繼承也被稱為偽經(jīng)典繼承，它綜合了我們昨天說的原型鏈和盜用構(gòu)造函數(shù)，將倆者的有點(diǎn)結(jié)合在了一起。它的基本思想是使用原型鏈繼承原型上的屬性和方法，通過盜用構(gòu)造函數(shù)繼承實(shí)例屬性，這樣的好處就是可以把方法定義在原型上復(fù)用，每個(gè)實(shí)例又有自己的屬性。

    function SuperType (name) {
        this.name = name;
        this.colors = ["red","yellow","bule"];
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name)
    }
    function SubType(name,age){
        SuperType.call(this,name);
        this.age = age;
    }
    SubType.prototype = new SuperType();
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    let instancel = new SubType("jackson",22);
    instancel.colors.push("pink");
    instancel.sayName(); // "jackson"
    instancel.sayAge();//22
    console.log(instancel.colors);// ["red", "yellow", "bule", "pink"]
    
    let instance2 = new SubType("bear", 20);
    console.log(instance2.colors); // ["red", "yellow", "bule"]
    instance2.sayName(); // "bear";
    instance2.sayAge(); // 20

上面的代碼大家有沒有一種豁然開朗的感覺，SubType調(diào)用SuperType，并且傳入name，然后定義自己的屬性age，此外SubType.prototype也被賦值位SuperType實(shí)例。原型賦值后又在這個(gè)原型上添加sayage方法，這樣創(chuàng)建倆個(gè)subType實(shí)例，這倆個(gè)實(shí)例都有自己屬性，還可以共享相同的方法。

組合繼承彌補(bǔ)了原型鏈和盜用構(gòu)造函數(shù)的不足，是js中使用最多的繼承模式。

寄生式繼承

寄生式繼承就是用一個(gè)函數(shù)包裝一個(gè)對象，然后返回這個(gè)函數(shù)的調(diào)用，這個(gè)函數(shù)就變成了個(gè)可以隨意增添屬性的實(shí)例或?qū)ο?。object.create()就是這個(gè)原理。

  // 寄生式繼承
    function subobject(obj) {
        let clone = Object(obj);
        clone.sayName = function(){
            console.log("jackson")
        };
        return clone;
    }
    let sub = {
        name:"bear"
    }
    let sup = subobject(sub);
    sup.sayName();//jackson

這個(gè)例子基于sub對象返回一個(gè)新對象，返回的sup對象有sub的屬性和方法，還有一個(gè)新方法sayName()。

寄生式繼承同樣適合主要關(guān)注對象，而不在乎類型和構(gòu)造函數(shù)的場景。object()函數(shù)不是寄生式繼承所必需的，任何返回新對象的函數(shù)都可以在這里使用。

注意通過寄生式繼承給對象添加函數(shù)會導(dǎo)致函數(shù)難以重用，與構(gòu)造函數(shù)模式類似。

寄生式組合繼承

組合繼承存在這一定的效率問題，它的父類構(gòu)造函數(shù)始終會被調(diào)用倆次，一次在創(chuàng)建字類原型時(shí)調(diào)用，另一次在子類構(gòu)造函數(shù)中調(diào)用。本質(zhì)上子類只需要在執(zhí)行時(shí)重寫自己的原型就行了。

     function inheritPrototype(subType, superType) {
        let prototype = Object(superType.prototype); // 創(chuàng)建對象
        prototype.constructor = subType; // 增強(qiáng)對象
        subType.prototype = prototype; // 賦值對象
    }

這個(gè) inheritPrototype()函數(shù)實(shí)現(xiàn)了寄生式組合繼承的核心邏輯。這個(gè)函數(shù)接收兩個(gè)參數(shù)：子類構(gòu)造函數(shù)和父類構(gòu)造函數(shù)。在這個(gè)函數(shù)內(nèi)部，第一步是創(chuàng)建父類原型的一個(gè)副本。然后，給返回的 prototype 對象設(shè)置 constructor 屬性，解決由于重寫原型導(dǎo)致默認(rèn) constructor 丟失的問題。最后將新創(chuàng)建的對象賦值給子類型的原型。如下例所示，調(diào)用 inheritPrototype()就可以實(shí)現(xiàn)前面例子中的子類型原型賦值：

function SuperType(name) {
        this.name = name;
        this.colors = ["red", "blue", "green"];
    }
    SuperType.prototype.sayName = function () {
        console.log(this.name);
    };

    function SubType(name, age) {
        SuperType.call(this, name);
        this.age = age;
    }
    inheritPrototype(SubType, SuperType);
    SubType.prototype.sayAge = function () {
        console.log(this.age);
    };

這里只調(diào)用了一次 SuperType 構(gòu)造函數(shù)，避免了 SubType.prototype 上不必要也用不到的屬性，因此可以說這個(gè)例子的效率更高。而且原型鏈仍然保持不變。