【重学前端】es6中class做了什么

前言

在JavaScript中不论是es5之前利用function定义一个对象的构造方法还是es6利用class定义类，都可以实现对象的实例化

• es5中定义一个对象

// es5
function Parent () {
  this.name = 'parent'
  this.age = 22
  this.work = function () {
    console.log('the ' + this.name + ' is working')
  }
}

Parent.prototype.speak = function () {
  console.log('hello!')
}

Parent.prototype.color = 'yello'

• es6中定义一个对象

class Parent {

  constructor () {
    this.name = 'parent'
    this.age = 22
  }

  work () {
    console.log('the ' + this.name + ' is working')
  }
}

Parent.prototype.speak = function () {
  console.log('hello!')
}

Parent.prototype.color = 'yello'

class Son extends Parent {
  constructor () {
    super()
    this.sonName = 'son'
  }
}

const son = new Son()

上述两种方法是等效的，都可以通过关键字new进行实例化

es6的class做了什么

我们利用babel转码工具对es6的class进行转码得到以下es5代码

'use strict';

// _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; 
  }; 
}();

// _possibleConstructorReturn
function _possibleConstructorReturn(self, call) { 
  if (!self) { 
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 
  } 
  
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

// _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; 
}

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

// Parent 类声明
var Parent = function () {
  function Parent() {
    _classCallCheck(this, Parent);

    this.name = 'parent';
    this.age = 22;
  }

  _createClass(Parent, [{
    key: 'work',
    value: function work() {
      console.log('the ' + this.name + ' is working');
    }
  }]);

  return Parent;
}();

Parent.prototype.speak = function () {
  console.log('hello!');
};

Parent.prototype.color = 'yello';

// Son类声明（继承Parent）
var Son = function (_Parent) {
  _inherits(Son, _Parent);

  function Son() {
    _classCallCheck(this, Son);

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

    _this.sonName = 'son';
    return _this;
  }

  return Son;
}(Parent);

// Son类实例化
var son = new Son();

从以上代码可以看出，es6的class转码后分为以下几个部分

• _createClass
• _classCallCheck
• _inherits继承
• _possibleConstructorReturn（super 方法）
• Parent定义
• Parent原型方法及属性定义
• Son类定义（继承Parent）
• Son实例化

_createClass 方法

核心：通过一个闭包+立即执行函数，内部维护一个私有的defineProperties方法，遍历传入的自定义对象属性列表，调用Object.defineProperty给类添加方法，将静态方法添加到构造函数上，将非静态的方法添加到构造函数的原型对象上

• 代码解析

var _createClass = function () {
  /**
   * 创建class方法
   * @param {*} target 目标对象
   * @param {*} props 属性 Array<{ key: string, value: Function | String | Number | ...}>
   */
  function defineProperties(target, props) {
    // 遍历传入的属性列表，调用Object.defineProperty向目标对象上添加定义属性
    for (var i = 0; i < props.length; i++) { 
      var descriptor = props[i]; 
      // 属性描述符 enumerable 是否可枚举
      descriptor.enumerable = descriptor.enumerable || false; 
      // 属性描述符 configurable 该属性的属性描述符是否可改变
      descriptor.configurable = true; 
      // 属性描述符 writable 如果设置值， writable为true ： value可以被赋值运算符修改
      if ("value" in descriptor) descriptor.writable = true; 
      Object.defineProperty(target, descriptor.key, descriptor); 
    } 
  } 
  
  // 暴露一个方法，接收参数
  /**
   * 
   * @param {*} Constructor // 目标对象
   * @param {*} protoProps // 非静态方法
   * @param {*} staticProps // 静态方法
   */
  return function (Constructor, protoProps, staticProps) {
    // 非静态方法，添加到构造函数（对象）的原型对象上 
    if (protoProps) defineProperties(Constructor.prototype, protoProps); 
    // 静态方法，添加到构造函数上
    if (staticProps) defineProperties(Constructor, staticProps); 
    return Constructor; 
  }; 
}();

• js对象的属性描述符（JSPropertyDescriptor）

Field Name	Description
getter	get 语法为属性绑定一个函数,每当查询该属性时便调用对应的函数,查询的结构为该函数的返回值
setter	如果试着改变一个属性的值，那么对应的 setter 函数将被执行
value	描述指定属性的值 , 可以是任何有效的 Javascript 值(函数 , 对象 , 字符串 ...).
configurable	当且仅当该属性的 configurable 为 true 时，该属性 描述符 才能够被改变, 同时该属性也能从对应的对象上被删除.
enumerable	描述指定的属性是否是 可枚举 的.
writable	当且仅当该属性的 writable 为 true 时, value 才能被赋值运算符改变。

_classCallCheck方法解析

/**
 * 防止类的构造函数以普通函数的方式调用
 * 判断构造函数是否存在于传入实例的原型链上（实例是构造函数的实例对象）
 * @param {*} instance 实例
 * @param {*} Constructor 构造函数
 */
function _classCallCheck(instance, Constructor) {
  // instance 即传入的this对象，判断Constructor是否存在于this的原型链上
  if (!(instance instanceof Constructor)) { 
    throw new TypeError("Cannot call a class as a function"); 
  } 
}

new的原理

/**
 * 创建一个new操作符
 * @param {*} Con 构造函数
 * @param  {...any} args 忘构造函数中传的参数
 */
  function createNew(Con, ...args) {
    let obj = {} // 创建一个对象，因为new操作符会返回一个对象
    Object.setPrototypeOf(obj, Con.prototype) // 将对象与构造函数原型链接起来
    // obj.__proto__ = Con.prototype // 等价于上面的写法
    let result = Con.apply(obj, args) // 将构造函数中的this指向这个对象，并传递参数
    return result instanceof Object ? result : obj
}

如果使用普通函数的调用方式，则调用时不会修改设置实例的原型，则以上判断就会出行false，就可以限制class 类以普通函数的方式进行调用

_inherits实现继承

/**
 * _inherits实现继承
 * @param {*} subClass 子类
 * @param {*} superClass 父类
 */
function _inherits(subClass, superClass) { 
  // 判断父类，既不是函数方法也不是null的情况报错
  // null是所有对象的原型链的顶端
  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 } }); 
  // 判断父类及环境是否存在Object.setPrototypeOf api
  // 将父类设置为子类的原型 继承父类
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; 
}

_possibleConstructorReturn（super 方法）

结合Son中的调用分析

function Son() {
  _classCallCheck(this, Son);

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

  _this.sonName = 'son';
  return _this;
}

/**
 * _possibleConstructorReturn 修改this的指向
 * @param {*} self // 子类的this
 * @param {*} call // 子类的原型（父类）
 */
function _possibleConstructorReturn(self, call) { 
  if (!self) { 
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); 
  } 
  
  // 修改this指向，将子类的原型指向父类
  return call && (typeof call === "object" || typeof call === "function") ? call : self; 
}

Parent定义方法解析

var Parent = function () {
  /**
   * 声明一个构造函数方法，定义Parent类
   */
  function Parent() {
    // 判断原型(防止以函数的方式调用)
    _classCallCheck(this, Parent);
    // 属性定义
    this.name = 'parent';
    this.age = 22;
  }

  // 调用_createClass方法定义Parent类上的方法
  _createClass(Parent, [{
    key: 'work',
    value: function work() {
      console.log('the ' + this.name + ' is working');
    }
  }]);

  // 返回声明的Parent类
  return Parent;
}();

// 定义原型链上的属性和方法
Parent.prototype.speak = function () {
  console.log('hello!');
};

Parent.prototype.color = 'yello';

补充：es5中的构造函数于es6中的class有什么区别

• ES6语法定义的class类，不能被提前调用，无法执行预解析；ES5的function函数可以提前调用，但是只有属性没有方法
• class内部会启用严格模式
  • class内部不可以使用未声明的对象
  • es5构造函数中可以
• class的所有方法都是不可枚举的
• class必须使用new关键词调用
• class 的继承有两条继承链
  • 一条是： 子类的proto 指向父类
  • 另一条： 子类prototype属性的proto属性指向父类的prototype属性.
  • es6的子类可以通过proto属性找到父类，而es5的子类通过proto找到Function.prototype

// es5
function Super() {}
function Sub() {}
Sub.prototype = new  Super()
Sub.prototype.constructor = Sub
var sub = new Sub()
console.log( Sub.__proto__ === Function.prototype) // true

// es6
class Super{}
class Sub extends Super {}
let sub = new Sub()
console.log( Sub.__proto__ === Super)// true