JavaScript 五十问——从源码分析 ES6 Class 的实现机制

Class是ES6中新加入的继承机制，实际是Javascript关于原型继承机制的语法糖，本质上是对原型继承的封装。本文将会讨论：
1、ES6 class的实现细
2、相关Object API盘点
3、Javascript中的继承实现方案盘点

正文

1、Class 实现细节

class Person{
   constructor(name, age){
     this.name = name
     this.age = age
    }

    static type = 'being'

  sayName (){
    return this.name
    }

  static intro(){
    console.log("")
    }
}

class Men extends Person{
    constructor(name, age){
        super()
      this.gender = 'male'
    }
}

const men = new Men()

以上代码是ES6 class的基本使用方式，通过babel解析后，主要代码结构如下：

'use strict';

var _createClass = function () {...}();// 给类添加方法

function _possibleConstructorReturn(self, call) { ...}//实现super

function _inherits(subClass, superClass) {...}// 实现继承

function _classCallCheck(instance, Constructor) {...} // 防止以函数的方式调用class

var Person = function () {
  function Person(name, age) {
      _classCallCheck(this, Person);

      this.name = name;
      this.age = age;
  }

  _createClass(Person, [{
      key: 'sayName',
      value: function sayName() {
        return this.name;
      }
  }], [{
      key: 'intro',
      value: function intro() {
        console.log("");
      }
  }]);

  return Person;
  }();

Person.type = 'being'; //静态变量

var Men = function (_Person) {
  _inherits(Men, _Person);

  function Men(name, age) {
    _classCallCheck(this, Men);

    var _this = _possibleConstructorReturn(this, (Men.__proto__ || Object.getPrototypeOf(Men)).call(this));

    _this.gender = 'male';
    return _this;
  }
    
  return Men;
  }(Person);

var men = new Men();

为什么说es6的class 是基于原型继承的封装呢？开始省略的四个函数又有什么作用呢?
下面，我们就从最开始的四个函数入手，详细的解释es6的class 是如何封装的。

第一：_classCallCheck函数，检验构造函数的调用方式：
代码

function _classCallCheck(instance, Constructor) {
 if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
  } 
}

我们知道，在javascript中 person = new Person() ，通常完成以下几件事：
1、创建一个新的对象 Object.create()
2、将新对象的 this 指向构造函数的原型对象
3、新对象的__proto__ 指向构造函数
4、执行构造函数
而普通函数调用，this通常指向全局
因此，_classCallCheck函数是用来检测类的调用方式。防止类的构造函数以普通函数的方式调用。

第二： _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是一个闭包+立即执行函数，以这种方式模拟一个作用域，将defineProperties私有化。
这个函数的主要作用是通过Object.defineProperty给类添加方法，其中将静态方法添加到构造函数上，将非静态的方法添加到构造函数的原型对象上。

第三： _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,  // 子类的原型的__proto__指向父类的原型
        //给子类添加 constructor属性 subclass.prototype.constructor === subclass
        { constructor: 
            { 
                value: subClass, 
                enumerable: false, 
                writable: true, 
                configurable: true 
            } 
        }
    ); 
    if (superClass) 
        //子类__proto__ 指向父类
        Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

从这个函数就能够很明显的看出来，class实现继承的机制了。

第四： _possibleConstructorReturn super（）

function _possibleConstructorReturn(self, call) { 
    if (!self) { 
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); //保证子类构造函数中 显式调用 super()
    } 
    return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

要想理解这个函数的作用，需要结合他的调用场景

var _this = _possibleConstructorReturn(this, (Men.__proto__ || Object.getPrototypeOf(Men)).call(this));// function Men（）{}

此时已经执行完_inherits函数，Men.__proto__ === Person
相当于：

var _this = _possibleConstructorReturn(this, Person.call(this));

很明显，就是将子类的this 指向父类。

API 总结

根据以上的分析，es6 class 的实现机制也可以总结出来了：
毫无疑问的，class机制还是在prototype的基础之上进行封装的
——contructor 执行构造函数相关赋值
——使用 Object.defineProperty()方法将方法添加的构造函数的原型上或构造函数上
——使用 Object.create() 和 Object.setPrototypeOf 实现类之间的继承子类原型__proto__指向父类原型子类构造函数__proto__指向父类构造函数
——通过变更子类的this 作用域实现super()

盘点JavaScript中的继承方式

1.原型链继承
2.构造函数继承
3.组合继承
4.ES6 extends 继承

详细内容可以参考聊一聊 JavaScript的继承方式https://segmentfault.com/a/11...

后记

终于写完了，在没有网络辅助的情况下写博客真是太难了！绝知此事要躬行呀！
原来觉得写一篇关于class的博客还不简单吗，就是原型链继承那一套呗，现在总结下来，还是有很多地方需要注意的；学习到了很多！嗯不说了，我还有好几个坑要填呢~
如果这篇文章对你有帮助的话，欢迎点赞收藏！
如果你有疑问的话，希望积极留言，共同讨论，共同进步！