ES 5 的构造函数到 ES 6 的类

前言

虽然 ES 6 里引入了「类」这个概念，但是实际上 ES 6 的类只是 ES 5 的语法糖，本质上还是一个「构造函数」。本片笔记主要回顾 ES 5 通过构造函数创建对象的一般方法，以及 ES 5 中类的继承的一般方法；然后再介绍 ES 6 的写法。

ES 5 中通过构造函数创建对象和实现类继承的一般方法

此部分涉及的内容基本出自《JavaScript 高级程序设计（第 3 版）》第六章：「面向对象的程序设计」，里面介绍了不少种创建对象的方法和实现继承的方法，这里我只从这些方法里各挑出一种最为广泛使用的方法。首先是书上所谓的「组合使用构造函数模式和原型模式」的创建对象的方法：

function Person(name, age, job) {
  this.name = name
  this.age = age
  this.job = job
  this.friends = [ 'Shelby', 'Court' ]
}

Person.prototype = {
  constructor: Person,
  sayName: function() {
    alert(this.name)
  }
}

Person.doSomething = function() {
  // do something
}
Person.aProperty = 'a property'

上面就是一个「类」：每个实例都拥有的各自不同的属性放到构造函数内部，通过 this 来初始化；所有实例都共享的方法放到构造函数的 prototype 上；同时这个类本身还有一些只是自己所有的属性或方法，别的面向对象语言里称之为静态属性（方法），这些静态属性直接挂到构造函数本身上。通过 new 操作符执行这个函数就可以得到对应的实例对象，所有的对象都有着自己的 name、age、job、friends 属性，同时共享原型对象上的 sayName 方法。上面就是 ES 5 里一个类的基本创建方法，当然如果要做的更好一点的话可以把 constructor 单独用 Object.defineProperty 来写，因为按照上面的写法它的 enumerable 的属性将会是 true，而实际上是 false 的。

再来看看类的继承，书上所谓「寄生组合式继承」，其原理就是在子类的中调用父类，但是把 this 的值绑定成子类，然后在维护好原型链，将 Object.create(prototype) 赋值给子类的 prototype 同时将 prototype 的 constructor 属性指向子类本身：

function Teacher(name, age, subject) {
  Person.call(this, name, age, 'teacher')
  this.subject = subject
}

Teacher.prototype = Object.create(
  Person.prototype,
  {
    constructor: {
      value: Teacher,
      writable: true,
      configurable: true,
      enumerable: false
    },
    teach: function() {
      // teach something
    }
  }
)

上面的代码就完成了 Teacher 类对 Person 的继承。

ES 6 中对应的写法

class Person {
  constructor(name, age, job) {
    this.name = name
    this.age = age
    this.job = job  
    this.friends = [ 'Shelby', 'Court' ]
  }
  sayName() {
    alert(this.name)
  }
  static soSomething() {
    // do something
  }
}

Person.aProperty = 'a property'

上面就是 ES 6 中类的写法，看起来简洁很多了。但是好像对于静态属性，ES 6 目前还没支持到这一步，所以也还是只能单独写。然后看下继承：

class Teacher extends Person {
  constructor(name, age, subject) {
    super(name, age, 'teacher ')
    this.subject = subject
   }
   teach() {
      // teach something
    }
}

需要注意的是，当子类想在 constructor 里引用 this 必须提前调用父类的构造函数 super() ，不然会报错，这是因为 「ES 6 的继承机制与上面 ES 5 的机制不同，ES 6 的机制是先由父类创建 this 值，然后再由子类的 contructor 去修改这个值」，这是我在 ES 6 相关的书上看到的，具体怎么个做法，暂时不得而知，不知道 Babel 会不会是按照 ES 6 的机制做的 transform。以上只是 class 的最基本的用法，剩下的一些特性下次详细介绍。