前言
虽然 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 的最基本的用法，剩下的一些特性下次详细介绍。
网友评论