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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,444评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,421评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,036评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,363评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,460评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,502评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,511评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,280评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,736评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,848评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,531评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2 352

推荐阅读更多精彩内容