美文网首页
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中的继承

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