JavaScript繼承
1、JS 的繼承到底有多少種實現方式呢?
2、ES6 的 extends 關鍵字是用哪種繼承方式實現的呢?
繼承種類
原型鏈繼承
function Parent1() {this.name = 'parentl'this.play = [1, 2, 3]
}function Child1() {this.type = 'child2'
}Child1.prototype = new Parent1();
console.log(new Child1());let child1 = new Child1();
child1.play.push(4)
let child2 = new Child1();
console.log(child1.play,child2.play)
輸出：
Parent1 { type: 'child2' }
[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]
特點
父類內存空間是共享的，當一個發生變化的時候,另外一個也隨之進行了變化。
構造函數繼承(借助 call)
function Parent1() {this.name = 'parent'
}Parent1.prototype.getName = function () {return this.name;
}function Child1() {Parent1.call(this);this.type = 'child1'
}let child = new Child1();
console.log(child);
console.log(child.getName())
輸出
Child1 { name: 'parent', type: 'child1' }
C:\Users\liyd\WebstormProjects\test\dataConvert.js:16
console.log(child.getName()) ^ TypeError: child.getName is not a function
缺點：
只能繼承父類的實例屬性和方法。不能繼承原型屬性和方法。
組合繼承方式（推薦）
function Parent3() {this.name = 'parent3'this.play =[1,2,3]
}Parent3.prototype.getName = function () {return this.name;
}function Child3() {Parent3.call(this);this.type = 'child6'
}
// 第一次調用Parent3
Child3.prototype = new Parent3()
// 手動掛上構造器，指向自己的構造函數
Child3.prototype.constructor = Child3var child3 = new Child3();
var child4 = new Child3();
child3.play.push(4)
console.log(child3.play,child4.play)
console.log(child3.getName())
console.log(child4.getName())
輸出：
[ 1, 2, 3, 4 ] [ 1, 2, 3 ]
parent3
parent3
原型式繼承
let parent4 = {name:"parent4",friends:["p1","p2","p3"],getName:function () {return this.name}
}let person4 = Object.create(parent4)
person4.name = "tom"
person4.friends.push("無始")let person5 = Object.create(parent4);
person5.friends.push("狂蟒")console.log(person4.name)
console.log(person4.name === person4.getName())
console.log(person5.name)
console.log(person4.friends)
console.log(person5.friends)
輸出：
tom
true
parent4
[ 'p1', 'p2', 'p3', '無始', '狂蟒' ]
[ 'p1', 'p2', 'p3', '無始', '狂蟒' ]
寄生式繼承
使用原型式繼承可以獲得一份目標對象的淺拷貝然后利用這個淺拷貝的能力再進行增強添加一些方法
- 寄生式繼承相比于原型式繼承還是在父類基礎上添加了更多的方法
let parent5 = {name:"parent5",friends:["p1","p2","p3"],getName:function () {return this.name}
}function clone(original) {let clone = Object.create(original)clone.getFriends = function (){return this.friends}return clone
}let person5 = clone(parent5);
let person6 = clone(parent5);
person5.friends.push("666")
console.log(person5.getName())
console.log(person5.getFriends())
console.log(person6.getName())
console.log(person6.getFriends())let person5 = clone(parent5);
console.log(person5.getName())
console.log(person5.getFriends())
輸出：
parent5
[ 'p1', 'p2', 'p3', '666' ]
parent5
[ 'p1', 'p2', 'p3', '666' ]
寄生組合式繼承（強烈推薦）
在前面這幾種繼承方式的優缺點基礎上進行改造得出了寄生組合式的繼承方式
這也是所有繼承方式里面相對最優的繼承方式
function clone(parent, child) {// 這里改用 Object.create 就可以減少組合繼承中多進行一次構造的過程child.prototype = Object.create(parent.prototype)child.prototype.constructor = child
}function Parent6(){this.name = "parent6"this.play = [1,2,3]
}Parent6.prototype.getName = function () {return this.name
}function Child(){Parent6.call(this)this.friends = 'child6'
}clone(Parent6,Child)Child.prototype.getFriends = function () {return this.friends
}let person6 = new Child()
console.log(person6)
console.log(person6.getName())
console.log(person6.getFriends())
輸出：
Child { name: 'parent6', play: [ 1, 2, 3 ], friends: 'child6' }
parent6
child6
總結
extends 實現繼承(超推薦 ES6)
語法糖
class Person{constructor(name) {this.name = name}getName = function () {console.log('Person:',this.name)return this.name}
}class Gamer extends Person{constructor(name,age) {super(name);this.age = age}
}let gamer = new Gamer("無始無終",26);
console.log(gamer.getName())
輸出：
Person: 無始無終
無始無終
)
)
＞)
