繼承學習總結

阿新 • • 發佈：2021-09-03

繼承

1.原型鏈繼承：

讓子類的原型物件指向父類的例項，當子類的例項找不到對應的方法時，就按原型鏈往上找。

function Parent(){
    this.name = ["原型鏈繼承"];
}
// 原型上掛載方法
Parent.prototype.getName = function(){
    console.log(this.name);
}
function Chind(){

}
// 原型鏈繼承
Chind.prototype = new Parent();
//原型鏈繼承會改變constructor指向，要設定重新指回
Chind.prototype.constructor = Chind;

let myChild1 = new Chind();
let myChild2 = new Chind();
myChild1.name[0] = "咕咕咕";
console.log(myChild1.name); //["咕咕咕"]
myChild2.getName();         //["咕咕咕"]

弊端：

原型都指向同一個Parent例項，當有兩個子類例項化物件時，其中一個修改了Parent的內容，那麼另一個例項也會受到影響。

原型鏈繼承會改變constructor指向，要設定重新指回

無法對父類進行super傳參。

2.建構函式繼承：

在子類的建構函式中，去執行父類的建構函式，並繫結子類的this。

// 構造方法繼承
    function Parent(name){
        this.name =name;
    }
    // 原型上掛載方法
    Parent.prototype.getName = function(){
        console.log(this.name);
    }
    function Chind(){
        Parent.call(this,"fct");
    }
    let myChild1 = new Chind();
    let myChild2 = new Chind();
    myChild1.name = "咕咕咕";
    console.log(myChild1.name); //"咕咕咕"
    console.log(myChild2.name); // fct
    myChild2.getName();         //報錯，構造方法繼承不能繼承父類原型上的屬性和方法

弊端：

構造方法繼承解決了子類例項都指向同一個父類例項，但構造方法繼承不能繼承父類原型上的屬性和方法

3.組合繼承

組合繼承 = 建構函式繼承 + 原型鏈繼承

// ----組合繼承-----
function Parent(name){
    this.name = name;
}
Parent.prototype.getName = function (){
    console.log(this.name);
}
function Child(){
    Parent.call(this,"小桃子");
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

let myChild1 = new Child();
let myChild2 = new Child();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 小桃子
myChild2.getName();     // 小桃子

缺點：每生成一個子類例項就得new 一個父類例項和執行一次call函式。導致父類建構函式始終會被呼叫兩次。

4. 寄生式繼承

function Parent(name){
    this.name = [name];
}
Parent.prototype.getName = function (){
    console.log(this.name);
}
function Child(){
    Parent.call(this,"水雲身");
}
Child.prototype = Parent.prototype;
Child.prototype.constructor = Child;

Child.prototype.print = function (){
    console.log("我是child");
}

let myChild1 = new Child();
let myChild2 = new Child();
myChild1.name[0] = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 水雲身
myChild2.getName();     // 水雲身

myChild1.print();   //我是child
let myParent = new Parent();
myParent.print();   //我是child

缺點：避免了父類建構函式始終被呼叫兩次，但子類對原型上的修改會影響（汙染）父類的原型。

5.寄生式組合繼承

基本思路：不通過呼叫父類建構函式給子類原型賦值，而是取得父類原型的一個副本。

function Parent(name){
    this.name = name;
}
Parent.prototype.getName = function (){
    console.log(this.name);
}
function Child(){
    Parent.call(this,"卿雲");
}
//子類原型 = 父類原型的一個副本
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.print = function (){
    console.log("我是child");
}

let myChild1 = new Child();
let myChild2 = new Child();
let myParent = new Parent();
myChild1.name = "咕咕咕";
console.log(myChild1.name); // 咕咕咕
console.log(myChild2.name); // 卿雲
myChild2.getName();     // 卿雲
myParent.getName();     //undefined

myChild1.print();   //我是child
myParent.print();   //報錯：myParent.print is not a function