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种种神奇魔法的秘密。