繼承

1，借用構(gòu)造函數(shù)繼承

優(yōu)點

• 使用call或者apply改變this指向

缺點

• 所有實例都擁有父類屬性和方法的副本，浪費空間
• 無法繼承父類原型上的方法

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')
// 實例,p1 p2擁有相同的屬性和方法，修改其中一個實例的屬性，不會影響到另一個
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 即使是引用類型，也互不影響

// 無法繼承父類原型上的屬性
console.log(p1.height) //undefined

2，原型鏈繼承

優(yōu)點

可以共享原型上的方法，不用每個實例都創(chuàng)建相同的方法

缺點

• 實例化時，無法向父類構(gòu)造函數(shù)傳遞參數(shù)
• 某個實例修改了原型上引用類型數(shù)據(jù)，所有實例都受影響

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ù)

// 初始化實例時，無法向父類構(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

// 其中一個實例修改了父類實例屬性上引用類型的數(shù)據(jù)，則所有實例都受影響
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ào)用了2次父類構(gòu)造函數(shù)，導(dǎo)致子類prototype上和實例上有兩份相同的屬性和方法
  即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

// 相當于給實例p1添加了一個name屬性
p1.name = 'p1'
console.log(p1.name, p2.name) //p1 undefined

// 擁有父類實例屬性和方法的副本，修改實例的屬性不會影響到其他實例
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'big' }

// 實例共享父類原型上的方法，若是引用類型，則都受影響
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)
// 修改其中一個實例引用類型屬性，則影響其他實例
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，寄生式繼承

// 返回一個對象，擴展該對象的屬性和方法，會被每個實例復(fù)制
// 傳入的obj會成為實例__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)化，因為組合式繼承會調(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`呢，
//因為這樣會導(dǎo)致子類原型和父類原型指向同一內(nèi)存地址
// 給子類自身添加原型屬性和方法時，變成給父類原型添加屬性和方法，所以需要將子類的原型指向父類的實例。
//使用寄生方 法，在內(nèi)部將fn的原型指向父類原型，然后返回fn的實例，再讓Child的原型指向該實例
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