ES6中的class是如何实现的(附Babel编译的ES5代码详解)

序言

这篇文章主要讲解面试中的一个问题 - ES6中的class语法的实现？

ECMAScript 6 实现了class，class是一个语法糖，使得js的编码更清晰、更人性化、风格更接近面向对象的感觉；也使 IDE 、编译期类型检查器、代码风格检查器等工具更方便地检测代码语法，做静态分析。同样的，这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js。

ES6 class 的 ES5 代码实现

JavaScript语言的传统方法是通过构造函数定义并生成新对象，这种写法和传统的面向对象语言差异较大。所以，ES6引入了Class这个概念作为对象的模板。

constructor

效果：ES6创建一个class会默认添加constructor方法，并在new调用时自动调用该方法。

ES5：

function Person(name, age) { this.name = name; this.age = age;}Person.prototype.toString = function () { return '(' + this.name + ',' + this.age + ')';}var p = new Person('Mia', 18);console.log(p);// Person { name: 'Mia', age: 18 }

ES6：

class Person { constructor(name, age) {  this.name = name;  this.age = age; } toString() {  return '(' + this.name + ',' + this.age + ')'; }}var p = new Person('Mia', 18);console.log(p);// Person { name: 'Mia', age: 18 }

ES6的class中constructor是构造方法，对应的是ES5中的构造函数Person，this关键字则代表实例对象。

里面的class类可以看做是构造函数的另一种写法，由typeof Person === 'function'为true；Person === Person.prototype.constructor为true可以得出，类的数据类型就是函数，类本身指向构造函数。也可以说class的底层依然是function构造函数。

类的公共方法都定义在类的prototype属性上。可以使用Object.assign一次向类添加多个方法。

特别的：class的内部定义的方法都是不可枚举的（non-enumerable），这一点与ES5的行为不一致。

ES5：

Object.keys(Person.prototype); // ['toString']

ES6：

Object.keys(Person.prototype); // Person {}

不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。

new调用

效果：class类必须使用new调用，否则会报错。

ES5：

Person()// undefined

ES6：

Person() // TypeError: Class constructor Person cannot be invoked without 'new'

实例的属性

效果：实例的属性是显式定义在this对象上，否则都是定义在原型上。类的所有实例共享一个原型对象，与ES5行为一致。

ES5：

function Person() { this.grade = {  count: 0 };}

ES6：

class Person { constructor() {  this.grade = {   count: 0  }; }}