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

大白的掘金發表於2019-02-28
JavaScript繼承

通過繼承方式可以分類：

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

一、只繼承父類的例項上的屬性

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);

複製程式碼

二、繼承父類的公共屬性

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);
複製程式碼

三、同時繼承父類的公共屬性和例項上的屬性

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);
複製程式碼

相關文章