# 概述
本文主要记录js中实现继承的几种方法的实现,优缺点分析
# 知识铺垫
+ **构造函数,原型和实例的关系:**
+ 每个构造函数都有一个原型对象--prototype
+ 每个原型对象都包含一个指向构造函数的指针--constructor
+ 每个实例对象都有一个指向原型对象的指针
+ 构造函数可以new实例对象
>**图解三者关系**
![FvvO2t.png](https://s2.ax1x.com/2019/01/13/FvvO2t.png)
---
# 原型继承
+ **核心思想:**
> 将父类的实例直接赋值给子类的原型对象prototype
+ **本质**
>重写了子类的原型对象,原本存在父类的属性和方法也存在于子类的prototype中了
+ **代码演示**
```
//父类
function Person() {
this.name = 'Tom'
this.age = 18
}
//子类
function Student() {
this.score = 100
}
//父类的实例赋值给子类的原型对象
Student.prototype = new Person()
Student.prototype.constructor = Student
let student1 = new Student();
console.log(student1.name,student1.age,student1.score)
console.dir(Student)
```
+ **打印结果:**
![FxpNZT.png](https://s2.ax1x.com/2019/01/13/FxpNZT.png)
+ **打印结果解析**
+ 首先,我们将Person的实例赋值给Student.prototype,这样在Student.prototype中就存在了Person中的属性和方法
+ 其次,如果我们不添加黄色方框中的代码,那么Student.prototype中的constructor指向的就是Person
当添加了黄色方框中的代码后,Student.prototype中的constructor又重新指向了Student
+ **原型继承存在的问题**
+ 通过原型实现继承时,原型会变成另一个类型的实例,所以**要通过黄色方框继承后将原型的构造函数重新指向原来的构造函数**
+ 使用原型继承时,**不能向父类的构造函数传参**
---
# 借用构造函数(解决传参问题)
+ **核心思想**
> 使用call()方法改变this指向,实现**属性**继承
+ **本质**
> 在子类的构造函数中调用父类构造函数并使用call()使this指向子类实例
+ **代码实现**
```
function Person(name,age) {
this.name = name
this.age = age
this.play = function () {
console.log(this.name + '玩游戏')
}
}
Person.prototype.test = function () {
console.log(this.name + '参加考试')
}
function Student(name,age,score) {
Person.call(this,name,age)
this.score = score
}
let student1 = new Student('Tom',18,100)
let student2 = new Student('Jerry',18,96)
console.dir(student1)
console.dir(student2)
student1.play()
student1.test()
```
+ **打印结果**
![Fxl9wF.png](https://s2.ax1x.com/2019/01/14/Fxl9wF.png)
+ **打印结果解析**
> + ***序号1***处,在子类的构造函数中使用了call()方法,继承了父类的属性和**定义在构造函数中的成员方法(不能继承定义在原型上的方法)**
> + ***序号2***处,因为使用的构造函数的形式,为了避免方法的重复定义,所以将方法定义在原型上,但这样不能继承,要想继承,就定义在构造函数内部
+ **存在的问题**
+ 借用构造函数虽然解决了传参问题,但是还是解决不了函数的重复定义问题
---
# 组合继承
+ **核心思想**
> 组合就是原型继承(继承方法)+借用构造函数(继承属性)的组合
+ **本质**
> + 把父类的方法定义在原型上,通过原型继承,让子类原型中拥有父类的成员方法
> + 把属性定义在构造函数中,子类通过call()方法继承父类属性
+ **代码演示**
```
function Person(name,age) {
this.name = name
this.age = age
}
Person.prototype.play = function () {
console.log(this.name + '在玩游戏')
}
function Student(name,age,score) {
Person.call(this,name,age)
this.score = score
}
Student.prototype = new Person()
Student.prototype.constructor = Student
let student1 = new Student('Tom',18,100)
console.log(student1)
student1.play()
let student2 = new Student('Jerry',10,60)
console.log(student2)
student2.play()
```
+ **打印结果**
![Fx3RJJ.png](https://s2.ax1x.com/2019/01/14/Fx3RJJ.png)
+ **打印结果解析**
> + ***序号1***处使用借助构造函数的形式实现属性继承
> + ***序号2***处采用原型继承的方式,继承了定义在原型方法上的成员方法(**使用原型继承后,记得将子类的原型中的构造函数指针重新指会子类的构造函数**)
网友评论