ES6里引入Class概念，非常类似其他面向对象语言（比如Java）。实际上，Class只是简化了对象原型方法的语法，实现原理依旧是ES5构造函数和对象原型。但是，ES6中类的继承，和ES5原型链继承略有不同。
1. Class语法
用ES6的class定义类：
class Vehicle {
// 构造函数
constructor(name) {
this.name = name;
}
// 实例方法
ignition() {
console.log("Start up:" + this.name);
}
// 静态方法
static getType(){
console.log("Type: Vehicle");
}
static getName() {
console.log("Name: Vehicle");
}
// 静态变量（ES7语法）
static defaultProps = {color: "red"};
// 存储器属性
set prop(value){
console.log("setter:" + value);
this.value= value;
}
get prop(){
return this.value;
}
}
var vehicle = new Vehicle ('vehicle');
vehicle.prop= 1; // setter:1
console.log(vehicle.prop); // 1
vehicle.ignition(); // "Start up:vehicle"
转为ES5是：
function Vehicle (name) {
this.name = name;
}
// 实例方法
Vehicle.prototype.ignition = function () {
console.log("Start up:" + this.name);
}
// 静态方法
Vehicle.getType = function (){
console.log("Type: Vehicle");
}
Vehicle.getName= function (){
console.log("Name: Vehicle");
}
// 静态变量
Vehicle.defaultProps = {color: "red"};
用class声明的类的特点为：
- 所有方法都定义在原型属性
Function.prototype上。 - 必须有
constructor方法，如果没有定义，会默认添加一个空的构造函数。 - 必须用
new创建类的实例，否则会抛错TypeError("Cannot call a class as a function"); -
class不存在变量提升。下面代码会抛错：
new Foo(); // TypeError: Foo is not a function
class Foo {};
2. 类的继承：extend
延续上面的例子，创建Vehicle的子类Car：
class Car extends Vehicle {
constructor(name){
super(name);
this.wheels = 4;
}
// 实例方法
drive(){
this.ignition();
console.log("Rolling on all "+this.wheels+"wheels!")
}
// 静态方法
static getType(){
console.log("Type: Car");
}
}
var car = new Car('smart');
car.drive(); // Start up:smart
// 类实例无法访问静态方法
console.log(car.getType); //undefined
// 只有类本身可以调用静态方法
Car.getType(); //Type: Car
ES6实现继承的原理与ES5完全不同：
- ES5的继承：先创建子类实例，然后将父类原型上的方法添加到子类实例上。
- ES6的继承：先创建父类实例，然后子类实例
this指向父类this，并且进行修改。
正因为ES6做继承时，是先创建父类实例，因此，有如下两个特性：
- 继承时，子类一旦显性声明了
constructor函数，就必须在构造函数里面调用super()方法，从而取得父类this对象（也可以不显性声明constructor函数，ES6会在默认生成的构造方法里面调用super()）。 - 允许定义继承原生数据结构（Array, String等）的子类，比如:
class myArray extends Array{
constructor(...args) {
super(...args);
}
}
var array = new myArray();
array.push(2);
array.length; //1
array[0]; //2
小结
在React中，实现组件用的就是ES6中class语法，例如：
import React from 'react';
export default class myTable extends React.Component {
constructor(props) {
super(props);
}
...
}
