javascript幾種繼承方式;不看就out啦

經過繼承方式能夠分類：

1. 只繼承父類實例上的屬性：call繼承
2. 繼承父類的公共屬性：鏈式繼承、Object.setPrototypeof()、Object.create()
3. 同時繼承父類的公共屬性和實例上的屬性:在子類內部調用call，使用Object.create/鏈式/Object.setPrototypeof()、class extends繼承

1、只繼承父類的實例上的屬性

1. call繼承

原理：把父類的this指向子類，而且執行 缺點：不能繼承公共屬性；

//父類
function A(){
    this.type='我是a類';
}
A.prototype.content={name:'我是a的內容呦！'};
//子類
function Q(){
    this.name='我是q啦';
    A.call(this);
}
Q.prototype.content={name:'我是q的內容，，哈哈哈'};
const q=new Q();
console.log(q);

複製代碼

2、繼承父類的公共屬性

1. 鏈式繼承

原理：利用的是原型鏈查找機制；

//父類
function A(){
    this.type='我是a啦';
}
A.prototype.content={name:'我是a的內容呦！'};
//子類
function Q(){
    this.name='我是q啦';
}
Q.prototype.content={name:'我是q的內容，，哈哈哈'};
Q.prototype.__proto__=A.prototype;
const q=new Q();
console.log(q);
複製代碼

2. Object.setPrototypeof(es6的寫法)

兼容性不太好

//父類
function A(){
    this.type='我是a啦';
}
A.prototype.content={name:'我是a的內容呦！'};
//子類
function Q(){
    this.name='我是q啦';
}
Q.prototype.content={name:'我是q的內容，，哈哈哈'};
Object.setPrototypeOf(Q.prototype,A.prototype);
const q=new Q();
console.log(q);
複製代碼

3. Object.create()

原理：create方法中聲明定義個空函數fn；使fn的prototype=傳入的參數；返回fn

⚠️注意：q.proto.constructor是A

//父類
function A(){
    this.type='我是a啦';
}
A.prototype.content={name:'我是a的內容呦！'};
//子類
function Q(){
    this.name='我是q啦';
}
Q.prototype.content={name:'我是q的內容，，哈哈哈'};
Q.prototype=Object.create(A.prototype);
//若是單寫Q.prototype=Object.create(A.prototype);；
//此時它的constructor是A；
//因此在Object.create的第二個參數constructor指向Q
Q.prototype=Object.create(A.prototype,{contructor:{value:Q}});
const q=new Q();
console.log(q);
複製代碼

3、同時繼承父類的公共屬性和實例上的屬性

1. 在子類內部調用call，使用Object.create/鏈式/Object.setPrototypeof()

//父類
function A(){
    this.type='我是a類';
}
A.prototype.content={name:'我是a的內容呦！'};
//子類
function Q(){
    this.name='我是q啦';
    A.call(this);
}
Q.prototype.content={name:'我是q的內容，，哈哈哈'};
Q.prototype.__proto__=A.prototype;//這裏用Object.create或者Object.setPrototypeof()均可以
const q=new Q();
console.log(q);
複製代碼

2. es6 class extends

class A{
    static a(){
        console.log('我是a，啦啦啦');
    }
    constructor(){
        this.type='a';
    }
    Sing(){
        console.log('我會唱歌！');
    }
}
class Q extends A{
    constructor(){
        super();
    }
}
const q=new Q();
console.log(q);
複製代碼