JS ES5和ES6中类的相关定义方式对比

前言

（在定义类以及生成新对象上，JavaScript）跟传统的面向对象语言（比如C++和Java）差异很大，很容易让新学习这门语言的程序员感到困惑。
ES6提供了更接近传统语言的写法，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

​ ——《ECMAScript6入门》

ES6虽然看上去和传统的面向对象语言很像，但实际上还是通过ES5的继承方式是实现的。下面将罗列ES5和ES6中类相关的定义写法，以此来帮助理解ES6中类的实现，并回顾JS中的组合式继承方法。

定义类

• ES6

  class Person{
      constructor(name, age){
          this.name = name;
          this.age = age;
      }
  }
  

• ES5

  function Person(name, age){
  	this.name = name;
      this.age = age;
  }
  

定义类方法

• ES6

  class Person{
      constructor(name, age){
          this.name = name;
          this.age = age;
      }
      talk(){
          console.log("Hello!");
      }
  }
  

• ES5

  function Person(name, age){
      this.name = name;
      this.age = age;
  }
  Person.prototype.talk = function(){
  	console.log("Hello!");
  }
  

定义静态成员

• ES6

  class Person{
      constructor(name, age){
          this.name = name;
          this.age = age;
          Person.count++;
      }
      static count = 0;
      static printCount(){
          console.log(Person.count);
      }
  }
  

• ES5

  function Person(name, age){
      this.name = name;
      this.age = age;
      Person.count++;
  }
  Person.count = 0;
  Person.printCount = function(){
      console.log(Person.count);
  }
  

类的继承

• ES6

  class Person{
      constructor(name, age){
          this.name = name;
          this.age = age;
          Person.count++;
      }
  }
  class Programmer extends Person{
      constructor(name, age, language){
          super(name, age);
          this.language = language;
      }
  }
  

• ES5

  function Person(name, age){
      this.name = name;
      this.age = age;
  }
  function Programmer(name, age, language){
      Person.call(this, name, age);
      this.language = language;
  }
  Programmer.prototype = new Person();
  Programmer.prototype.constructor = Programmer;
  Programmer.__proto__ = Person;