es6class揭秘

在es6中，新增了class关键字用于定义一个类，但是本质上并没有给javascript增加新的oop机制，因为javascript原型继承以及构造函数式声明使人感到晦涩难懂，添加class的目的就是为了掩盖它底层的机制，使得我们不用直接接触这些概念，相当于一个语法糖。

class语法

在chrome中运行以下代码

  class Super{
        constructor(){
            this.name = "Super";
        }
        superSayHello(){
            console.log("super hello")
        }
    }
    class Sub extends Super{
        constructor(){
            super();
            this.realName = "Sub";
        }
        subSayHello(){
            console.log("sub hello")
        }
    }

    var sub = new Sub();

调试观察sub的值。

我们发现所有的方法都是定义在对象的prototype属性上,不难得出这几者的关系如下图所示

es5语法

es6中的class与我们之前写的原型继承基本一致，同样的关系用es5来写的话

    function Super(){
        this.name= "Super";
    }
    Super.prototype.superSayHello = function(){
            console.log("super hello")
    };

    function Sub(){
        //借用父类构造函数 等价于es6中的super()
        Super.call(this);
        this.realName= "Sub";
    }
    //以上只实现了数据的复制
    //使用Object.create() 而不是new Sub(); 避免调用两次Sub();
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    
    var sub = new Sub();

扩展

因为javascript本质上是没有类这个概念，一切皆对象，为了模拟其它面向对象语言的特性(如JAVA)，出现了许多种间接实现继承的方法。以上es5的继承其实就是我们说的寄生式组合继承，也是javascript中最常用的继承模式。