ES6+ class中代碼的真正樣子

這篇文章用代碼對比的方式解釋ES6中的類若是用咱們熟悉的ES5來看是什麼樣的。

1、用class定義一個空類
在ES6中：

class Person { 

}

在ES5中：

var Person = (function () {
    function Person() {
    }
    return Person;
}());

結論：這個結果很清晰，原來ES6中的class類在ES5中也是定義一個構造函數，而後返回出來。

2、定義屬性
在ES6中：

class Person { 
  
  constructor(name,age) { 
    this.name = name;    //在constructor中定義屬性
  }

  age = age;    //直接定義屬性

}

在ES5中：

var Person = (function () {

    function Person(name, age) {
        this.age = age;    //在es6中定義的屬性都在這裏，並且傳值也沒問題
        this.name = name;
    }
    return Person;
    
}());

結論：在ES6中定義的屬性，無論直接在class中定義，仍是在constructor中均可以，可是在constructor中定義屬性纔是推薦寫法，畢竟ES6轉ES5也並非100%合理。

3、定義方法
在ES6（傳統寫法、箭頭函數寫法）

class Person { 

  Run() {    //傳統形式的函數寫法
    this;
  }

  eat = () => {    //es6中的箭頭函數寫法
    this;
  }

}

在ES5中：

var Person = (function () {

    function Person() {
        var _this = this;
        this.eat = function () {    //箭頭寫法直接掛到Person的this下
            _this;
        };
    }
    Person.prototype.Run = function () {    //傳統寫法則掛到prototype中定義
        this;
    };
    
    return Person;
}());

結論：這裏不只展現了在方法的定義，還比較了在ES6中傳統函數和箭頭函數的區別，傳統函數的this和es5函數的this指向徹底同樣，但箭頭函數的this指向的是它外層對象的做用域，這裏不細說，想了解請點這裏。

4、static關鍵字
在ES7中：

class Person {

  static name = "Jack";    //對屬性使用static

  static run() {     //對傳統函數使用static
    console.log(22)
  }

  static see = () => {    //對箭頭函數使用static
    
  }
};

在ES5中：

var Person = (function () {
    function Person() {
    }
    Person.run = function () {
        console.log(22);
    };
    return Person;
}());

Person.name = "Jack";
Person.see = function () {};

結論：在class中，若是在屬性或方法前使用static關鍵字，則能夠在外部訪問，訪問方式是Person.xxx或Person.xxx()