ES6+ class中代码的真正样子

这篇文章用代码对比的方式解释ES6中的类如果用我们熟悉的ES5来看是什么样的。

一、用class定义一个空类
在ES6中：

class Person { 

}

在ES5中：

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

结论：这个结果很清晰，原来ES6中的class类在ES5中也是定义一个构造函数，然后返回出来。

二、定义属性
在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%合理。

三、定义方法
在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指向的是它外层对象的作用域，这里不细说，想了解请点这里。

四、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()