前言
今天我們聊聊js中的繼承。你知道幾種繼承方式呢？
繼承
通俗的來說繼承就是讓子類擁有父類的屬性和方法，子類能夠訪問到父類的屬性和方法。繼承的主要目的是實現程式碼複用和建立更具結構化的程式設計。在JavaScript中，繼承可以透過原型鏈（prototype chain）和類（class）兩種方式來實現。
實現繼承的方法
第一種 原型鏈繼承
透過往子類的建構函式的原型上新增父類的例項物件實現繼承
function Parent(){//父類
this.name = 'parent';
this.age = 30;
this.num = [1,2,3];
}
function Child(){//子類
this.name = 'child';
}
Child.prototype = new Parent();
let s1 = new Child();
let s2 = new Child();
s1.num.push(4);
console.log(s1.num);//[ 1, 2, 3, 4 ]
console.log(s2.num);//[ 1, 2, 3, 4 ]
但是有一個問題，子類例項會繼承到同一個原型物件，記憶體共享，所以例項之間會互相影響
第二種 建構函式繼承
將子類建構函式的this顯示繫結到父類身上。這樣子類的建構函式身上就顯示具有父類身上的屬性。
function Parent(){
this.name = 'parent';
this.age = 30;
this.num = [1,2,3];
}
Parent.prototype.like = 'run'
function Child(){
Parent.call(this);
this.name = 'child';
}
let s1 = new Child();
let s2 = new Child();
s1.num.push(4);
console.log(s1.num);//[ 1, 2, 3, 4 ]
console.log(s2.num);//[ 1, 2, 3 ]
console.log(s1.like);//undefined
可以看到成功解決第一種原型鏈繼承帶來的問題，但是帶來了一個新的問題，建構函式繼承無法繼承到父類身上的原型
第三種 組合繼承
就是將前面兩種結合起來
function Parent(){
this.name = 'parent';
this.age = 30;
this.num = [1,2,3];
}
Parent.prototype.like = 'run'
function Child(){
Parent.call(this);
this.name = 'child';
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;//修正constructor
let s1 = new Child();
let s2 = new Child();
s1.num.push(4);
console.log(s1.num);//[ 1, 2, 3, 4 ]
console.log(s2.num);//[ 1, 2, 3 ]
console.log(s1.like);//run
成功解決上面兩種帶來的問題，別急還有一個問題，就是當我們在將子類建構函式的原型修改爲父類的例項物件時，它並沒有一個屬於子類建構函式原型身上的constructor屬性，所以我們需要手動新增這個屬性。而且父類的建構函式執行了兩次，效能開銷大。
第四種 原型式繼承
他是物件字面量的繼承，使用Object.create()函式。但是多個例項之間繼承到的引用型別是相同的地址，會相互影響。
let parent = {
name: 'parent',
age: 30,
num: [1,2,3]
}
let child1 = Object.create(parent);
let child2 = Object.create(parent);
child1.num.push(4);
console.log(child1.num);//[1,2,3,4]
console.log(child2.num);//[1,2,3,4]
第五種 寄生式繼承
它本質上還是原型式繼承，只不過是透過函式的方式返回，可以讓子物件在初始化就能擁有自己的屬性和方法，缺點和原型式繼承的問題一樣。
let parent = {
name: 'parent',
age: 30,
num: [1,2,3]
}
function clone(obj){
let clone = Object.create(obj);
clone.getnum = function(){
return this.num;
}
return clone;
}
let child1 = clone(parent);
第六種 寄生組合式繼承
這是在es5中最優雅的一種繼承方式，在組合式繼承的基礎上將子類建構函式的原型透過Object.create()方法賦值，這樣就解決了父類的建構函式被new了兩次的問題。
function Parent(){
this.name = 'parent';
this.age = 30;
this.num = [1,2,3];
}
function Child(){
Parent.call(this);
this.name = 'child';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;//修正constructor
let s1 = new Child();
let s2 = new Child();
s1.num.push(4);
console.log(s1.num);//1234
console.log(s2.num);//123
第七種 class繼承
這是es6中的一種繼承方式，可以使用關鍵字extends實現繼承。它的底層本質上還是寄生組合式繼承。
class Parent{
constructor(){
this.name = 'parent';
this.age = 30;
this.num = [1,2,3];
}
}
class Child extends Parent{
constructor(){
super();
this.name = 'child';
}
}
let s1 = new Child();
let s2 = new Child();
s1.num.push(4);
console.log(s1.num);//1234
console.log(s2.num);//123
總結
OK，今天我們聊了什麼是繼承以及繼承的作用，還有7種繼承方式，需要記住的是寄生組合式繼承和類繼承比較常見。
