javascript繼承方法以及優(yōu)缺點(diǎn)

xiao7cn 發(fā)布于2019-08-23 11:45 / 3212人閱讀

摘要：前提組合指的是什么就是這兩部分的組合構(gòu)造函數(shù)屬性的繼承和建立子類和父類原型的鏈接。與此同時(shí)，原型鏈還能保持不變開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承方式

前提: 組合指的是什么？就是這兩部分的組合：構(gòu)造函數(shù)屬性的繼承和建立子類和父類原型的鏈接。

借用構(gòu)造函數(shù)繼承

最簡單的方法，使用call或apply方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上

function Super(name){
    this.name=name;
    this.friends = ["小紅","小強(qiáng)"];
}
Super.prototype.sayName = function(){
    alert(this.name)
};
function Sub(name){
    Super.apply(this,arguments);
}

var instance1 = new Sub("小明");
var instance2 = new Sub("小明");
instance1.friends.push("張三");
console.log(instance1.friends);//["小紅", "小強(qiáng)", "張三"]
console.log(instance2.friends);//["小紅", "小強(qiáng)"]

缺點(diǎn): 沒辦法繼承超類中的原型屬性和方法

原型鏈繼承

        function Super(){
            this.name="小明";
        }
        Super.prototype.sayName = function(){
            alert(this.name)
        };
        function Sub(){}
        
        Sub.prototype = new Super();
        
        Sub.prototype.constructor = Sub;  
        //此句的作用是為了不讓繼承鏈的紊亂,因?yàn)槿魏我粋€(gè)prototype對(duì)象都有一個(gè)constructor屬性，指向它的構(gòu)造函數(shù),
        //并且每一個(gè)實(shí)例也有一個(gè)constructor屬性，默認(rèn)調(diào)用prototype對(duì)象的constructor屬性,
        //所以new Animal()的constructor指向Super,導(dǎo)致Sub.prototype.constructor改而指向了Super 為了不導(dǎo)致紊亂 所以要手動(dòng)指回
        
        var instance = new Sub();
        instance.sayName();//小明

缺點(diǎn):
1.當(dāng)父類中包含引用類型屬性值時(shí)，其中一個(gè)子類的多個(gè)實(shí)例中，只要其中一個(gè)實(shí)例引用屬性只發(fā)生修改一個(gè)修改，其他實(shí)例的引用類型屬性值也會(huì)立即發(fā)生改變
2.原因是父類的屬性變成子類的原型屬性

組合式繼承
（原型繼承+借用構(gòu)造函數(shù)繼承）

    
        function Super(){
        this.name="小明";
            this.friends = ["小紅","小強(qiáng)"];
        }
        Super.prototype.sayName = function(){
            alert(this.name)
        };
        function Sub(){
            Super.call(this);
        }
        
        Sub.prototype = new Super();
        var instance1 = new Sub();
        var instance2 = new Sub();
        instance1.friends.push("張三");
        console.log(instance1.friends);//["小紅", "小強(qiáng)", "張三"]
        console.log(instance2.friends);//["小紅", "小強(qiáng)"]
        instance1.sayName();//小明
        instance2.sayName();//小明

缺點(diǎn):
1.兩次調(diào)用父構(gòu)造函數(shù) 并且子類的自由屬性和原型鏈上的屬性會(huì)重復(fù)覆蓋 (打印instance1對(duì)象 instance1.prototype和instance1都有一個(gè)name屬性)
2.同原型鏈繼承的第一個(gè)缺點(diǎn)

寄生組合式繼承
寄生組合式繼承兩步:

1.在子類中調(diào)用父類的構(gòu)造函數(shù)：
  Super.apply(this,arguments)
2.建立子類和父類原型的鏈接 
  最簡單的方法就是用Object.create()方法對(duì)父類的原型進(jìn)行淺復(fù)制，賦給子類原型：
  Sub.prototype=Object.create(Super.prototype);   //相比之前的原型鏈繼承方法：SubType.prototype=new SuperType()；這里沒有創(chuàng)建構(gòu)造函數(shù)；

    //寄生組合式繼承函數(shù)
        function inheritPrototype(sub,super){
            var prototype=Object.create(super.prototype) 
            prototype.constructor = sub; //增強(qiáng)對(duì)象
            sub.prototype = prototype; //最后指定對(duì)象  
        }
   
    //最終的實(shí)現(xiàn)方法
        function Super(name){
            this.name=name;
        }
        Super.prototype.sayName=function(){console.log(this.name)}
        
        function Sub(name,age){
            Super.call(this,name);
            this.age=age;
        }
        inheritPrototype(SubType,SuperType); //實(shí)現(xiàn)繼承
        
        //其實(shí)，說白了寄生組合式繼承就是一個(gè)借用構(gòu)造函數(shù) + 相當(dāng)于淺拷貝父類的原型對(duì)象

這種方式的高效率體現(xiàn)它只調(diào)用了一次Parent構(gòu)造函數(shù)，并不會(huì)創(chuàng)建不必要的、多余的屬性。與此同時(shí)，原型鏈還能保持不變；開發(fā)人員普遍認(rèn)為寄生組合式繼承是引用類型最理想的繼承方式.