繼承
1浮还，借用構(gòu)造函數(shù)繼承
優(yōu)點(diǎn)
- 使用call或者apply改變this指向
缺點(diǎn)
- 所有實(shí)例都擁有父類屬性和方法的副本肋层，浪費(fèi)空間
- 無(wú)法繼承父類原型上的方法
function Parent(name) {
this.name = name
this.like = {
type: 'big',
}
this.eat = function() {
console.log(this.name + 'eat')
}
}
Parent.prototype.height = '170'
function Child(age, name) {
this.age = age
Parent.call(this, name)
}
var p1 = new Child(20, 'p1')
var p2 = new Child(30, 'p2')
// 實(shí)例,p1 p2擁有相同的屬性和方法原叮，修改其中一個(gè)實(shí)例的屬性楣颠，不會(huì)影響到另一個(gè)
console.log(p1)
console.log(p2)
// 擁有屬性和方法的副本瓢阴，互不影響
p1.name = '哈哈'
p1.like.type = 'small'
console.log(p1.name, p2.name) //哈哈 p2
console.log(p1.like, p2.like) //small big 即使是引用類型，也互不影響
// 無(wú)法繼承父類原型上的屬性
console.log(p1.height) //undefined
2瓣戚，原型鏈繼承
優(yōu)點(diǎn)
可以共享原型上的方法端圈，不用每個(gè)實(shí)例都創(chuàng)建相同的方法
缺點(diǎn)
- 實(shí)例化時(shí)，無(wú)法向父類構(gòu)造函數(shù)傳遞參數(shù)
- 某個(gè)實(shí)例修改了原型上引用類型數(shù)據(jù)子库，所有實(shí)例都受影響
function Parent(name) {
this.name = name
this.like = {
type: 'big',
}
this.eat = function() {
console.log(this.name + 'eat')
}
}
Parent.prototype.height = '170'
function Child(age, name) {
this.age = age
}
Child.prototype = new Parent()
Child.prototype.constructor = Child //修正構(gòu)造函數(shù)
// 初始化實(shí)例時(shí)舱权，無(wú)法向父類構(gòu)造函數(shù)傳遞參數(shù)
var p1 = new Child('p1')
var p2 = new Child('p2')
console.log(p1, p2) //Child { age: 'p1' } Child { age: 'p2' }
console.log(p1.name, p2.name) //undefined undefined
p1.name = 'p1'
console.log(p1.name, p2.name) //p1 parent
// 其中一個(gè)實(shí)例修改了父類實(shí)例屬性上引用類型的數(shù)據(jù)，則所有實(shí)例都受影響
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'small' }
// 可以繼承父類原型上的屬性
console.log(p1.height) //170
3仑嗅，組合式繼承
結(jié)合構(gòu)造函數(shù)和原型鏈結(jié)合
優(yōu)點(diǎn)
- 擁有父類實(shí)例屬性和方法的副本
- 可以共享父類原型上的屬性和方法
缺點(diǎn)
- 調(diào)用了2次父類構(gòu)造函數(shù)宴倍，導(dǎo)致子類
prototype上和實(shí)例上有兩份相同的屬性和方法
即Child.prototype中和p1上有屬性相同
function Parent(name) {
this.name = name
this.like = {
type: 'big',
}
this.eat = function() {
console.log(this.name + 'eat')
}
}
Parent.prototype.height = '170'
Parent.prototype.obj = {
weight: '200',
}
function Child(age, name) {
this.age = age
Parent.call(this, name)
}
Child.prototype = new Parent('parent')
Child.prototype.constructor = Child //修正構(gòu)造函數(shù)
var p1 = new Child('p1')
var p2 = new Child('p2')
console.log(p1, p2)
console.log(p1.name, p2.name) //parent parent
// 相當(dāng)于給實(shí)例p1添加了一個(gè)name屬性
p1.name = 'p1'
console.log(p1.name, p2.name) //p1 undefined
// 擁有父類實(shí)例屬性和方法的副本张症，修改實(shí)例的屬性不會(huì)影響到其他實(shí)例
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'big' }
// 實(shí)例共享父類原型上的方法，若是引用類型鸵贬，則都受影響
p1.obj.weight = '220'
p1.height = '180'
console.log(p1.height, p2.height) //180 170
console.log(p1.obj, p2.obj) //{ weight: '220' } { weight: '220' }
4俗他，原型式繼承
function create(obj) {
function F() {}
F.prototype = obj
return new F()
}
var obj = {
name: 'good',
likes: ['a', 'b', 'c'],
}
var p1 = create(obj)
// 修改其中一個(gè)實(shí)例引用類型屬性，則影響其他實(shí)例
p1.name = 'p1'
p1.likes.push('d')
var p2 = create(obj)
console.log(p1.name, p2.name) //p1 good
console.log(p1.likes, p2.likes) //[ 'a', 'b', 'c', 'd' ] [ 'a', 'b', 'c', 'd' ]
5阔逼，寄生式繼承
// 返回一個(gè)對(duì)象兆衅，擴(kuò)展該對(duì)象的屬性和方法，會(huì)被每個(gè)實(shí)例復(fù)制
// 傳入的obj會(huì)成為實(shí)例__proto__上的屬性和方法
function create(obj) {
var clone = Object.create(obj)
clone.name = 'good'
clone.likes = ['a', 'b', 'c']
return clone
}
var person = {
age: 20,
eats: ['apple', 'banana'],
}
var p1 = create(person)
p1.age = 30
p1.likes.push('d')
p1.eats.push('hhh')
console.log(p1.age, p1.likes) //30 [ 'a', 'b', 'c', 'd' ]
console.log(p1.eats) //[ 'apple', 'banana', 'hhh' ]
var p2 = create(person)
console.log(p2.age, p2.likes) //20 [ 'a', 'b', 'c' ]
console.log(p2.eats) //[ 'apple', 'banana', 'hhh' ]
6嗜浮，寄生組合式繼承
在組合式繼承繼承上優(yōu)化羡亩，因?yàn)榻M合式繼承會(huì)調(diào)用2次父類構(gòu)造函數(shù)，使用寄生式危融，可以繼承父類原型上的方法
function Parent(name) {
this.name = name
this.like = {
type: 'big',
}
this.eat = function() {
console.log(this.name + 'eat')
}
}
Parent.prototype.height = '170'
Parent.prototype.obj = {
weight: '200',
}
function Child(age, name) {
this.age = age
Parent.call(this, name)
}
// 這里為什么不 `Child.prototype=Parent.prototype`呢畏铆，
//因?yàn)檫@樣會(huì)導(dǎo)致子類原型和父類原型指向同一內(nèi)存地址
// 給子類自身添加原型屬性和方法時(shí)，變成給父類原型添加屬性和方法吉殃，所以需要將子類的原型指向父類的實(shí)例辞居。
//使用寄生方 法，在內(nèi)部將fn的原型指向父類原型蛋勺，然后返回fn的實(shí)例瓦灶，再讓Child的原型指向該實(shí)例
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child
var p1 = new Child()
var p2 = new Child()
console.log(p1.__proto__ === Child.prototype) //true
console.log(Child.prototype.__proto__ === Parent.prototype) //true
