美文网首页
03.js中的继承

03.js中的继承

作者: HLE | 来源:发表于2019-01-14 11:15 被阅读0次

# 概述

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

相关文章

  • 03.js中的继承

    # 概述 本文主要记录js中实现继承的几种方法的实现,优缺点分析 # 知识铺垫 + **构造函数,原型和实例的关系...

  • 03.js点击事件

    1. 点击事件 document.getElementById('').onclick = function(ev...

  • Java之继承

    继承的概念 继承的格式 继承示例 继承中成员变量的访问特点 继承中成员方法的访问特点

  • JNI基础 -- C++基础知识(继承多态,虚函数 )

    继承 在Java中类的继承只能是单继承,但是在C++中可以多继承。继承是通过一个冒号表示的,如下: C++中的继承...

  • python中的类的继承、多态和运算符重载

    类的继承 1.继承 python中的类支持继承,并且支持多继承。 python中默认情况是继承自object(ob...

  • 1.6 继承

    本小节知识点: 继承基本概念 OC中的继承关系 OC中如何实现继承 1.继承基本概念 现实生活中的继承 交通工具类...

  • Java中的继承

    学习笔记 目录:一、继承的实现二、继承中成员变量、构造方法、成员方法访问特点1、继承中成员变量访问的特点2、继承中...

  • Javascript中的继承

    很多语言中都有继承的概念,继承这种东西为什么会出现? 简而言之,继承之所以出现,就是为了减少重复无用功。好比爸爸有...

  • JS中的继承

    1. prototype实现继承 由于IE不支持Man.prototype.proto=Human.prototy...

  • iOS中的继承

    概念 子类可以直接复用父类中的成员 子类继承父类所有方法的声明和实现 非私有的实例变量以及协议 继承时要在.h中声...

网友评论

      本文标题:03.js中的继承

      本文链接:https://www.haomeiwen.com/subject/wzpuxqtx.html