ES5实现ES6的Class

使用ES5实现ES6的Class

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

Class的本质

class可以看作是一个生成器函数。就像下面这样的一个函数：

function MyClass() {
  // 代码
}

它与普通函数的唯一区别就是，在函数的[[construct]]内部指定了this的指向，使得代码中的this指向新创建的对象。

使用new运算符调用这个函数，就会创建一个新对象。而这个新对象的原型，会指向MyClass.prototype。

使用ES5实现Class

在ES5中，我们可以通过字面量方式创建对象。

var MyClass = {
  // 代码
};

创建新对象，使用Object.create()方法。

var obj = Object.create(MyClass);

构造函数

ES6 的class的本质是一个特殊的函数，这个函数叫做构造函数。构造函数的特点就是，内部存在一个[[Construct]]属性。

在调用一个函数时，如果发现这个函数存在[[Construct]]属性，就会以一种特殊的方式执行。这个特殊的方式就是，会在内部创建新的对象，并将这个对象作为函数的this指向。

在ES5中，通过设置函数的[[Construct]]属性，可以将函数转变成构造函数。

MyClass.prototype = {
  // 代码
};

MyClass[[Construct]] = function() {
  // 代码
};

实例与原型

在面向对象编程中，每个对象都有一个prototype属性，指向其原型对象。对象的所有属性和方法都存在于原型对象中。

在ES5中，原型属性是通过Object.create()方法设置的。

var obj = Object.create(MyClass.prototype);

继承

ES6 中的class支持继承。继承可以让我们创建一个新的类，这个新的类会继承父类的所有属性和方法。

在ES5中，我们可以通过设置子类的原型对象为父类的实例来实现继承。

function ChildClass() {
  // 代码
}

ChildClass.prototype = Object.create(MyClass.prototype);

方法

ES6 中的class中的方法，实际上就是原型对象上的属性。

MyClass.prototype.sayHello = function() {
  // 代码
};

属性

ES6 中的class中的属性，实际上就是原型对象上的属性。

MyClass.prototype.name = 'John Doe';

总结

ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。