03.js中的继承

# 概述

本文主要记录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***处采用原型继承的方式,继承了定义在原型方法上的成员方法(**使用原型继承后,记得将子类的原型中的构造函数指针重新指会子类的构造函数**)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容