继承

1，借用构造函数继承

优点

• 使用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，原型链继承

优点

可以共享原型上的方法，不用每个实例都创建相同的方法

缺点

• 实例化时，无法向父类构造函数传递参数
• 某个实例修改了原型上引用类型数据，所有实例都受影响

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 //修正构造函数

// 初始化实例时，无法向父类构造函数传递参数
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

// 其中一个实例修改了父类实例属性上引用类型的数据，则所有实例都受影响
p1.like.type = 'small'
console.log(p1.like, p2.like) //{ type: 'small' } { type: 'small' }

// 可以继承父类原型上的属性
console.log(p1.height) //170

3，组合式继承

结合构造函数和原型链结合

优点

• 拥有父类实例属性和方法的副本
• 可以共享父类原型上的属性和方法

缺点

• 调用了2次父类构造函数，导致子类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 //修正构造函数

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，寄生式继承

// 返回一个对象，扩展该对象的属性和方法，会被每个实例复制
// 传入的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，寄生组合式继承

在组合式继承继承上优化，因为组合式继承会调用2次父类构造函数，使用寄生式，可以继承父类原型上的方法

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`呢，
//因为这样会导致子类原型和父类原型指向同一内存地址
// 给子类自身添加原型属性和方法时，变成给父类原型添加属性和方法，所以需要将子类的原型指向父类的实例。
//使用寄生方 法，在内部将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