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中最經常使用的繼承模式。