ES6中增加了一些新特性，但从底层的角度来说，只是一些语法糖。但是就我个人来说，如果不了解这些语法糖的本质，是用不安心的。那我们要如何揭开这些语法糖的真实面目呢？
Babel to the rescue！ Babel是一款将ES6代码转换为ES5代码的编译器，从而让我们可以无视浏览器的支持，直接享受ES6的新特性。同时，我们也可以通过研究Babel编译出的ES5代码，来揭开ES6的面纱。
ES6 Classes
ES6中的Classes是在Javascript现有的原型继承的基础上引入的一种语法糖。Class语法并没有引入一种新的继承模式。它为对象创建和继承提供了更清晰，易用的语法。
我们用class关键字来创建一个类，constructor关键字定义构造函数，用extends关键字来实现继承，super来实现调用父类方法。
好，下面是一个ES6 class语法的完整例子：
//定义父类View
class View {
constructor(options) {
this.model = options.model;
this.template = options.template;
}
render() {
return _.template(this.template, this.model.toObject());
}
}
//实例化父类View
var view = new View({
template: 'Hello, <%= name %>'
});
//定义子类LogView，继承父类View
class LogView extends View {
render() {
var compiled = super.render();
console.log(compiled);
}
}
这段简短的代码就用到了上述的几个关键词。class语法的确的简洁明确，借鉴了主流OO语言的语法，更易于理解。
然而我在用这段代码时，又有些犹豫。这还是我熟悉的js原型继承吗，这真的是同一种继承模式的一个语法糖吗？
真相究竟是如何呢？我们就拿babel编译之后的代码作为切入口，来看看ES6 class语法的本质。
下面是上述ES6代码用babel编译之后的结果：
'use strict';
var _get = function get(_x, _x2, _x3) {
var _again = true;
_function: while (_again) {
var object = _x,
property = _x2,
receiver = _x3;
desc = parent = getter = undefined;
_again = false;
if (object === null) object = Function.prototype;
var desc = Object.getOwnPropertyDescriptor(object, property);
if (desc === undefined) {
var parent = Object.getPrototypeOf(object);
if (parent === null) {
return undefined;
} else {
_x = parent;
_x2 = property;
_x3 = receiver;
_again = true;
continue _function;
}
} else if ('value' in desc) {
return desc.value;
} else {
var getter = desc.get;
if (getter === undefined) {
return undefined;
}
return getter.call(receiver);
}
}
};
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
function _inherits(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError('Cannot call a class as a function');
}
}
var View = (function() {
function View(options) {
_classCallCheck(this, View);
this.model = options.model;
this.template = options.template;
}
_createClass(View, [{
key: 'render',
value: function render() {
return _.template(this.template, this.model.toObject());
}
}]);
return View;
})();
var LogView = (function(_View) {
_inherits(LogView, _View);
function LogView() {
_classCallCheck(this, LogView);
_get(Object.getPrototypeOf(LogView.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(LogView, [{
key: 'render',
value: function render() {
var compiled = _get(Object.getPrototypeOf(LogView.prototype), 'render', this).call(this);
console.log(compiled);
}
}]);
return LogView;
})(View);
这段代码很长，我们只关注里面的函数，可以得到它的结构如下:
//用于得到原型链上属性的方法的函数
var _get = function get(_x, _x2, _x3) {
//······
}
//用于创建对象的函数
var _createClass = (function() {
//内部函数，定义对象的属性
function defineProperties(target, props) {
//······
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
//用于实现继承的函数
function _inherits(subClass, superClass) {
//······
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
var View = (function() {
//······
return View;
})();
var LogView = (function(_View) {
//······
})(View);
View类的实现
我们从一个View类的创建开始分析
class View {
constructor(options) {
this.model = options.model;
this.template = options.template;
}
render() {
return _.template(this.template, this.model.toObject());
}
}
//ES5代码
var View = (function() {
function View(options) {
_classCallCheck(this, View);
this.model = options.model;
this.template = options.template;
}
_createClass(View, [{
key: 'render',
value: function render() {
return _.template(this.template, this.model.toObject());
}
}]);
return View;
})();
我们从编译之后的代码中可以看出，View是一个IIFE，里面是一个同名的函数View，这个函数经过 _createClass()函数的处理之后，被返回了。所以我们得出的第一点结论就是，ES6中的class实际就是函数。当然这点在各种文档中已经明确了，所以让我们继续分析。
IIFE中的同名的View实际上就是我们在ES5的原型继承中使用的构造函数，所以ES6中的class是对ES5中的构造函数的一种包装。我们发现，在class中设定的属性被放在ES5的构造函数中，而方法则以键值对的形式传入一个_createClass()函数中。那么这个_createClass()函数又制造了什么魔法呢？
var _createClass = (function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ('value' in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
})();
_createClass也是一个IIFE，有一个内部的函数defineProperties，这个函数遍历属性的描述符，进行描述符的默认设置，最后使用Object.defineProperty()方法来写入对象的属性。IIFE的renturn部分有两个分支，一个是针对一个类的原型链方法，一个是静态方法，我们看到原型链方法被写入构造函数的原型对象里，而静态方法则被直接写入构造函数里，因此我们不用实例化对象就可以直接调用一个类的静态方法了。
js中的函数是对象，Function构造函数的prototype指向Object.prototype，因此可以写入属性
类继承的实现
OK，到目前我们已经搞清了ES6的class关键字是如何工作的，那么ES6中的继承有是如何实现的呢？下面让我们看看_inherits()函数。
function _inherits(subClass, superClass) {
if (typeof superClass !== 'function' && superClass !== null) {
throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
_inherits()函数的关键部分便是subClass.prototype = Object.create(···)。通过Object.create()方法来指定新创建对象的原型，由此省去了对父类构造函数的处理，达到了简单的原型继承效果。
然后我们来看看创建LogView类的代码：
//ES6
class LogView extends View {
render() {
var compiled = super.render();
console.log(compiled);
}
}
//ES5
var LogView = (function(_View) {
_inherits(LogView, _View);
function LogView() {
_classCallCheck(this, LogView);
_get(Object.getPrototypeOf(LogView.prototype), 'constructor', this).apply(this, arguments);
}
_createClass(LogView, [{
key: 'render',
value: function render() {
var compiled = _get(Object.getPrototypeOf(LogView.prototype), 'render', this).call(this);
console.log(compiled);
}
}]);
return LogView;
})(View);
LogView类和View类的最大不同便是增加了一个_get()函数的调用，我们仔细看这个_get()函数会发现它接收几个参数，子类的原型，"constructor"标识符，还有this。再看下面对super.render()的处理，同样是用_get()函数来处理的。再看_get()函数的源码，就可以发现_get()函数的作用便是遍历对象的原型链，找出传入的标识符对应的属性，把它用apply绑定在当前上下文上执行。
大家是不是对这种继承模式似曾相识呢？对了，这就是所谓的“构造函数窃取”。当我们需要继承父类的属性时，在子类的构造函数内部调用父类构造函数，在加上Object.create()大法，然后就可以继承父类的所有属性和方法了。
结语
以上就是笔者对ES6中的class做的一些解读，依据是babel的编译结果。今天刚好看到getify大神的一篇博客，将的是ES6中的箭头函数其实并不是一个语法糖，而是一种新的不带this的函数。他还进一步说了，错误的过程得到正确的结果，会导致很多后续的问题。
而本文的结论是建立在class是一种语法糖的基础之上的，根据MDN的文档，我们应该可以确认这个结论是可靠的。而ES6中的特性，如箭头函数，并不都是语法糖，因此在后续的ES6探秘文章中，我们将用其他的途径，来揭示ES6种种神奇魔法的秘密。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。