继承可以使得子类别具有父类的各种方法和属性
继承方法：
一、原型链继承
原型链继承是比较常见的继承方式之一其中涉及的构造函数、原型和实例
三者之间存在着一定的关系：
- 每一个构造函数都有一个原型对象
- 原型对象又包含一个指向构造函数的指针
- 而实例则包含一个原型对象的指针
function Parent1() {
this.name = 'parent1'
this.play = [1, 2, 3]
}
function Child1() {
this.type = 'child1'
}
Child1.prototype = new Parent1()
console.log(new Child1())
上面代码看似没有问题，虽然父类的方法和属性都能够访问,但其实有一个潜在的问题，下面例子来说明这个问题
var s1 = new Child1()
var s2 = new Child1()
s1.play.push(4)
console.log(s1.play, s2.play)
// [1,2,3,4],[1,2,3,4]
上面代码明明只改变了s1的play属性，为啥s2的属性也跟着改变了，原因很简单，因为两个实例使用的是同一个原型对象，他们的内存空间是共享的，当一个发生变化的时候，另外一个也随之进行变化 。这就是使用原型链继承方式的缺点
二、构造函数继承（借助call）
构造函数的优缺点：
优点：它使父类引用属性不会被共享，优化了第一种继承方式的弊端。
缺点：只能继承父类的实例属性和方法，不能继承原型属性和方法
function Parent2() {
this.name = 'parent2'
}
Parent2.prototype.getName = function() {
return this.name
}
function Child1() {
Parent2.call(this)
this.type = 'child2'
}
let child = new Child1()
console.log(child) // Child1 {name: "parent2", type: "child2"}
console.log(child.getName()) // 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()
Parent3.call(this)
this.type = 'child3'
}
// 第一次调用 Parent3()
Child3.prototype = new Parent3()
// 手动挂上构造器，指向自己的构造函数
Child3.prototype.constructor = Child3
var s3 = new Child3()
var s4 = new Child3()
s3.play.push(4)
console.log(s3.play, s4.play) //[1, 2, 3, 4] , [1, 2, 3]
console.log(s3.getName()) //parent3
console.log(s4.getName()) //parent3
上面代码解决了前两种方法的问题，又有了新的问题，通过上面的注释，我们可以看到Parent3被调用了两次，第一次是改变Child3的prototype的时候，第二次通过call调用Parent3的时候，那么Parent3多构造一次就多进行了一次性能开销。
四、原型式继承 （Object.create()）
该方法接收两个参数：
1、用作新对象原型的对象
2、为新对象定义额外属性的对象（可选参数）
let parent4 = {
name: 'parent4',
friends: ['p1', 'p2', 'p3'],
getName: function() {
return this.name
}
}
let person4 = Object.create(parent4)
person4.name = 'tom'
person4.friends.push('jerry')
let person5 = Object.create(parent4)
person5.friends.push('lucy')
console.log(person4.name) // tom
console.log(person4.name === person4.getName()) // true
console.log(person5.name) // parent4
console.log(person4.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
console.log(person5.friends) // ["p1", "p2", "p3", "jerry", "lucy"]
上面代码通过Object.create()方法可以实现普通对象的继承，不仅能继承属性，同样也能继承getName()方法
五、寄生式继承
使用原型式继承可以获得一份目标对象的浅拷贝，然后利用这个浅拷贝的能力再进行增强，添加一些方法，这样的继承方式 ，称为寄生式继承。
虽然优缺点和原型式继承一样，但对于普通对象的继承方式来说，寄生式继承相比于原型式继承还是在父类基础上添加了更多的方法。
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)
console.log(person5.getName()) // parent5
console.log(person5.getFriends()) // ["p1", "p2", "p3"]
通过上面代码，我们可以看到person5是通过寄生式继承生成的实例，它不仅仅有getName方法,而且最后也用了getFriends方法，从最后输出的结果中可以看到person5通过clone方法添加了getFriends方法,从而使person5这个普通对象在继承过程中又增加了一个方法，这样的继承方式就是寄生式继承。
六、寄生组合式继承
在前面这几种继承方式的优缺点基础上进行改造，得出了寄生组合式的继承方式，这也是所有继承方式里面相对最优的继承方式。
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 Child6() {
Parent6.call(this)
this.friends = 'child6'
}
clone(Parent6, Child6)
Child6.prototype.getFriends = function() {
return this.friends
}
let person6 = new Child6()
console.log(person6) // Child6 {name: "parent6", play: Array(3), friends: "child6"}
console.log(person6.getName()) // parent6
console.log(person6.getFriends()) // child6
总结
总结结构图
网友评论