JavaScript中模拟类与ES6新增的Class的比较

JavaScript使用函数模拟类，并基于原型实现继承。自ECMAScript 2015(ES6)开始，JavaScript 中有了类(class)的概念，这这并不是说JavaScript可以像其它面向对象语言一样，可以基于类实现继承。JavaScript中的类只是对现有的基于原型的继承模型的一种语法包装，也就是说是一种语法糖，其本质上类还是一个函数。但它能让我们可以用更简明的语法实现继承，也使代码的可读性变得更高，同时为以后的JavaScript语言版本添加更多的面向对象特征打下基础。

1. 类的定义

ES6中新增了class，这使我们可以使用类声明或类表达式的方式定义类。在而ES6之前，只能使用函数来模似类定义。

1.1 模拟类定义

在ES6之前，可以像下面这样模拟一个类。定义类时，还可以通过ES5中的Object.defineProperty来指定属性的可配置性、可访问性等：

这样我们就定义一个"Person"类，该类有"name"和"sex"两个属性和一个原型"sayName"方法，而"sex"属性是只读属性。

1.2 "class"类定义

使用ES6中类语句，可以像下面这样定义：

这定义了一个同样的"Person"类，它有有"name"和"sex"两个属性和一个"sayName"方法，而"sex"也是一个只读属性，这个只读属性使用"get"关键字定义，这是一种便捷方式。如果需要定义只读属性之外的，如：可配置、可枚举性等仍然需要使用"defineProperty"。

1.3 类和继承的本质

JavaScript是基于原型的语言，其继承是基于原型链实现的。无论ES6之前的类模拟，还是ES6中class类定义，其本质还是原型链继承。

在JavaScript的原型链继承中，需要继承到子类的属性(方法可以认为是一种特殊的属性)需要添加到原型链prototype对象上。通过new创建对象实例后，其本质是将类"prototype"对象上的属性复制到实例"__proto__"属性中。访问对象属性时，如果存在实例属性则返回实例属性，如果实例属性不存在，则在"__proto__"属性中查找有继承的原型属性。

所以，在前面模拟类，并创建实例后，进行"person.__proto__===Person.prototype"判断时，其返回值为"true"。

ES6中class类定义只是一种语法糖，只是看起来像类、用起来更方法，其本质上还是原型链继承。所在，在前面class定义类并创建实例后，进行"person.__proto__===Person.prototype"判断时，其返回值"true"。

更新多关于原型链继承的介绍请参考：prototype、proto与JavaScript继承机制

2. 声明与表达式

模拟类与class类定义都支持声明和表达式两种定义形式。

2.1 模拟类

在使用函数模拟类时，可以使用函数声明，或函数表达式两种定义形式。

2.2 类定义

使用"class"定义类时，同样支持类声明或类表达式两种形式。

两者的不同

类声明不同于函数声明，它没有作用域的提升。也就是说，必须在引用之前声明它。

对于函数模拟类来说可以来说，可以先引用再声明：

但类声明没有作用域的提升，先引用会产生ReferenceError异常：

3. 静态方法

在面向对象语言中，静态方法是指不需要实例化，可以通过类名直接调用的方法，但静态方法不会继承到类实例中。静态方法经常用来作为工具函数。

在使用函数模拟类时，可以像下面这样定义静态方法：

在ES6 "class"类定义中，可以使用"static"关键字定义：

4. 继承与扩展

一个类可以继承自另一个类，并可以扩展一些父类中没有方法。在原型继承中，实现比较复杂：

而在ES6的类继承中，可以使用extends扩展子类。语法非常简单明了：

5. 访问父类方法

在ES6之前，我们会像下面这样访问父类中的构造函数、方法等：

ES6的类定义中，还增加了super关键字，通过该关键字，使用我们可以访问父类的构造函数或方法等：

ES6的类定义中，还增加了"super"关键字会非常有用。在上例中，我们通过它调用父类的构造函数，在子类"sayName()"方法中调用了父类中的方法，并进行了一定的扩展。

来自：http://itbilu.com

交流群：564850876