JavaScript常見的六種繼承方式
前言
面向物件程式設計很重要的一個方面，就是物件的繼承。A 物件通過繼承 B 物件，就能直接擁有 B 物件的所有屬性和方法。這對於程式碼的複用是非常有用的。
大部分面向物件的程式語言，都是通過“類”（class）實現物件的繼承。傳統上，JavaScript 語言的繼承不通過 class(ES6 引入了class 語法)，而是通過“原型物件”（prototype）實現。那麼在JS中常見的繼承方式有幾種呢？
方式一、原型鏈繼承
這種方式關鍵在於:子型別的原型為父型別的一個例項物件。
//父型別 function Person(name, age) { this.name = name, this.age = age, this.play = [1, 2, 3] this.setName = function () { } } Person.prototype.setAge = function () { } //子型別 function Student(price) { this.price = price this.setScore = function () { } } Student.prototype = new Person() // 子型別的原型為父型別的一個例項物件 var s1 = new Student(15000) var s2 = new Student(14000) console.log(s1,s2)
但這種方式實現的本質是通過將子類的原型指向了父類的例項，所以子類的例項就可以通過__proto__訪問到 Student.prototype 也就是Person的例項，這樣就可以訪問到父類的私有方法，然後再通過__proto__指向父類的prototype就可以獲得到父類原型上的方法。於是做到了將父類的私有、公有方法和屬性都當做子類的公有屬性
子類繼承父類的屬性和方法是將父類的私有屬性和公有方法都作為自己的公有屬性和方法，我們都知道在操作基本資料型別的時候操作的是值，在操作引用資料型別的時候操作的是地址，如果說父類的私有屬性中有引用型別的屬性，那它被子類繼承的時候會作為公有屬性，這樣子類1操作這個屬性的時候，就會影響到子類2。
s1.play.push(4)
console.log(s1.play, s2.play)
console.log(s1.__proto__ === s2.__proto__)//true
console.log(s1.__proto__.__proto__ === s2.__proto__.__proto__)//true
s1中play屬性發生變化，與此同時，s2中play屬性也會跟著變化。
另外注意一點的是，我們需要在子類中新增新的方法或者是重寫父類的方法時候，切記一定要放到替換原型的語句之後
function Person(name, age) { this.name = name, this.age = age } Person.prototype.setAge = function () { console.log("111") } function Student(price) { this.price = price this.setScore = function () { } } // Student.prototype.sayHello = function () { }//在這裡寫子類的原型方法和屬性是無效的， //因為會改變原型的指向，所以應該放到重新指定之後 Student.prototype = new Person() Student.prototype.sayHello = function () { } var s1 = new Student(15000) console.log(s1)
特點：
- 父類新增原型方法/原型屬性，子類都能訪問到
- 簡單，易於實現
缺點：
- 無法實現多繼承
- 來自原型物件的所有屬性被所有例項共享
- 建立子類例項時，無法向父類建構函式傳參
- 要想為子類新增屬性和方法，必須要在
Student.prototype = new Person()之後執行，不能放到構造器中
方式二: 借用建構函式繼承
這種方式關鍵在於:在子型別建構函式中通用call()呼叫父型別建構函式
<script type="text/javascript">
function Person(name, age) {
this.name = name,
this.age = age,
this.setName = function () {}
}
Person.prototype.setAge = function () {}
function Student(name, age, price) {
Person.call(this, name, age) // 相當於: this.Person(name, age)
/*this.name = name
this.age = age*/
this.price = price
}
var s1 = new Student('Tom', 20, 15000)
這種方式只是實現部分的繼承，如果父類的原型還有方法和屬性，子類是拿不到這些方法和屬性的。
console.log(s1.setAge())//Uncaught TypeError: s1.setAge is not a function特點：
- 解決了原型鏈繼承中子類例項共享父類引用屬性的問題
- 建立子類例項時，可以向父類傳遞引數
- 可以實現多繼承(call多個父類物件)
缺點：
- 例項並不是父類的例項，只是子類的例項
- 只能繼承父類的例項屬性和方法，不能繼承原型屬性和方法
- 無法實現函式複用，每個子類都有父類例項函式的副本，影響效能
方式三: 原型鏈+借用建構函式的組合繼承
這種方式關鍵在於:通過呼叫父類構造，繼承父類的屬性並保留傳參的優點，然後通過將父類例項作為子類原型，實現函式複用。
function Person(name, age) {
this.name = name,
this.age = age,
this.setAge = function () { }
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this,name,age)
this.price = price
this.setScore = function () { }
}
Student.prototype = new Person()
Student.prototype.constructor = Student//組合繼承也是需要修復建構函式指向的
Student.prototype.sayHello = function () { }
var s1 = new Student('Tom', 20, 15000)
var s2 = new Student('Jack', 22, 14000)
console.log(s1)
console.log(s1.constructor) //Student
console.log(p1.constructor) //Person
這種方式融合原型鏈繼承和建構函式的優點，是 JavaScript 中最常用的繼承模式。不過也存在缺點就是無論在什麼情況下，都會呼叫兩次建構函式：一次是在建立子型別原型的時候，另一次是在子型別建構函式的內部，子型別最終會包含父型別物件的全部例項屬性，但我們不得不在呼叫子類建構函式時重寫這些屬性。
優點：
- 可以繼承例項屬性/方法，也可以繼承原型屬性/方法
- 不存在引用屬性共享問題
- 可傳參
- 函式可複用
缺點：
- 呼叫了兩次父類建構函式，生成了兩份例項
方式四: 組合繼承優化1
這種方式通過父類原型和子類原型指向同一物件，子類可以繼承到父類的公有方法當做自己的公有方法，而且不會初始化兩次例項方法/屬性，避免的組合繼承的缺點。
function Person(name, age) {
this.name = name,
this.age = age,
this.setAge = function () { }
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () { }
}
Student.prototype = Person.prototype
Student.prototype.sayHello = function () { }
var s1 = new Student('Tom', 20, 15000)
console.log(s1)
但這種方式沒辦法辨別是物件是子類還是父類例項化
console.log(s1 instanceof Student, s1 instanceof Person)//true true
console.log(s1.constructor)//Person優點：
- 不會初始化兩次例項方法/屬性，避免的組合繼承的缺點
缺點：
- 沒辦法辨別是例項是子類還是父類創造的，子類和父類的建構函式指向是同一個。
方式五: 組合繼承優化2
藉助原型可以基於已有的物件來建立物件，var B = Object.create(A)以A物件為原型，生成了B物件。B繼承了A的所有屬性和方法。
function Person(name, age) {
this.name = name,
this.age = age
}
Person.prototype.setAge = function () {
console.log("111")
}
function Student(name, age, price) {
Person.call(this, name, age)
this.price = price
this.setScore = function () {}
}
Student.prototype = Object.create(Person.prototype)//核心程式碼
Student.prototype.constructor = Student//核心程式碼
var s1 = new Student('Tom', 20, 15000)
console.log(s1 instanceof Student, s1 instanceof Person) // true true
console.log(s1.constructor) //Student
console.log(s1)同樣的，Student繼承了所有的Person原型物件的屬性和方法。目前來說，最完美的繼承方法！
方式六：ES6中class 的繼承
ES6中引入了class關鍵字，class可以通過extends關鍵字實現繼承，還可以通過static關鍵字定義類的靜態方法,這比 ES5 的通過修改原型鏈實現繼承，要清晰和方便很多。
ES5 的繼承，實質是先創造子類的例項物件this，然後再將父類的方法新增到this上面（Parent.apply(this)）。ES6 的繼承機制完全不同，實質是先將父類例項物件的屬性和方法，加到this上面（所以必須先呼叫super方法），然後再用子類的建構函式修改this。
需要注意的是，class關鍵字只是原型的語法糖，JavaScript繼承仍然是基於原型實現的。
class Person {
//呼叫類的構造方法
constructor(name, age) {
this.name = name
this.age = age
}
//定義一般的方法
showName() {
console.log("呼叫父類的方法")
console.log(this.name, this.age);
}
}
let p1 = new Person('kobe', 39)
console.log(p1)
//定義一個子類
class Student extends Person {
constructor(name, age, salary) {
super(name, age)//通過super呼叫父類的構造方法
this.salary = salary
}
showName() {//在子類自身定義方法
console.log("呼叫子類的方法")
console.log(this.name, this.age, this.salary);
}
}
let s1 = new Student('wade', 38, 1000000000)
console.log(s1)
s1.showName()
優點：
- 語法簡單易懂,操作更方便
缺點：
- 並不是所有的瀏覽器都支援class關鍵字