JS中常見的幾種繼承方式
阿新 • • 發佈:2021-11-08
JS的三種繼承方式
1.ES6 類繼承
//1- es6 類繼承 class Parent { constructor() { this.age = 30; } } class Child extends Parent { constructor() { super(); this.name = '張三'; } } let o1 = new Child(); console.log(o1, o1.name, o1.age);// Child {age: 30, name: '張三'} '張三' 30
2.原型鏈繼承
優點: 父類方法可以複用
缺點:父類的所有引用屬性(info)會被所有子類共享,更改一個子類的引用屬性,其他子類也會受影響子型別例項不能給父型別建構函式傳參
// 2- 原型鏈繼承 function Parent() { this.age = 30; } function Child() { this.name = '張三'; } Child.prototype = new Parent(); let o2 = new Child(); console.log(o2, o2.name, o2.age);// Child {name: '張三'} '張三' 30
3.建構函式繼承
優點: 1.可以在子類建構函式中向父類傳引數
2.父類的引用屬性不會被共享
缺點:只能繼承建構函式的內部成員,不能繼承原型鏈(Parent.prototype)上的方法
// 3- 建構函式繼承 function Parent() { this.age = 18; } function Child() { this.name = '張三'; Parent.call(this); } let o3 = new Child(); console.log(o3, o3.name, o3.age);// Child {name: '張三', age: 18} '張三' 18
4.混合繼承
優點: 1.父類的方法可以複用
2.可以在Child建構函式中向Parent建構函式中傳參
3.父類建構函式中的引用屬性不會被共享
// 4- 組合式繼承
function Parent() {
this.age = 19;
}
function Child() {
Parent.call(this);
this.name = '張三';
}
Child.prototype = new Parent();
let o4 = new Child();
console.log(o4, o4.name, o4.age);// Child {age: 19, name: '張三'} '張三' 19