ES6 探秘：Classes

时间 2019-11-06

标签 es6 探秘 classes 栏目 JavaScript 繁體版

原文原文链接

ES6中增长了一些新特性，但从底层的角度来讲，只是一些语法糖。可是就我我的来讲，若是不了解这些语法糖的本质，是用不安心的。那咱们要如何揭开这些语法糖的真实面目呢？ express

Babel to the rescue！ Babel是一款将ES6代码转换为ES5代码的编译器，从而让咱们能够无视浏览器的支持，直接享受ES6的新特性。同时，咱们也能够经过研究Babel编译出的ES5代码，来揭开ES6的面纱。浏览器

ES6 Classes

ES6中的Classes是在Javascript现有的原型继承的基础上引入的一种语法糖。Class语法并无引入一种新的继承模式。它为对象建立和继承提供了更清晰，易用的语法。 babel

咱们用class关键字来建立一个类，constructor关键字定义构造函数，用extends关键字来实现继承，super来实现调用父类方法。app

好，下面是一个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语言的语法，更易于理解。 this

然而我在用这段代码时，又有些犹豫。这仍是我熟悉的js原型继承吗，这真的是同一种继承模式的一个语法糖吗？ prototype

真相到底是如何呢？咱们就拿babel编译以后的代码做为切入口，来看看ES6 class语法的本质。code

下面是上述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);

这段代码很长，咱们只关注里面的函数，能够获得它的结构以下:blog

//用于获得原型链上属性的方法的函数
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种种神奇魔法的秘密。