美文网首页
你不知道的ES5和ES6继承

你不知道的ES5和ES6继承

作者: 目标_ff90 | 来源:发表于2018-10-13 23:10 被阅读0次

       ES5继承和ES6继承的区别,在ES6还没有发布的时候 ,js定义类是以函数的形式,例如

    function TestFather() {
    this.aa = 'aa';
    }
    TestFather.prototype.getAA = function() {
    return this.aa
    }

       而ES6 已经可以用关键class来定义个类 例如

    class TestFather {
    constructor() {
    this.aa = 'aa';
    }
    getAA() {
    return this.aa;
    }
    }
    let father = new TestFather();
    father.getAA();

    ES5中构造函数是function函数本身 而 ES6中构造函数 是constructor 函数,类似与java
    接下来谈一下ES5继承和ES6继承
    ES5继承是

    function AA () {
    this.aa = 'aa'
    }
    AA.prototype.getAA = function() {
    console.log(this)
    return this.aa
    }
    function BB() {
    AA.call(this)
    }
    BB.prototype = new AA()
    BB.prototype.constructor = BB
    let bb = new BB()
    bb.getAA() // log BB { aa: 'aa' }

    而ES6的中继承

    class AA {
    constructor() {
    this.aa = 'aa'
    }
    getAA() {
    console.log(this)
    return this.aa
    }
    }
    class BB extends AA {
    constructor() {
    super()
    }
    }
    let bb = new BB() // log BB { aa: 'aa' }
    bb.getAA()

        ES6中子类继承父类的属性使用了super关键字,ES6语法实现是ES5的语法糖,表面上 ES6的类关键字和子类继承关键字 实现的结构和ES5继承一样 但是根本还是有差别的 其中ES5继承prototype属性是先实例化父类 直接继承 而 ES6实在实例化子类对象时继承父类prototype,即实例化父类。
    原文链接

    相关文章

      网友评论

          本文标题:你不知道的ES5和ES6继承

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