从 Babel 转译过程浅谈 ES6 实现继承的原理

更新日期: 2021-05-29阅读: 1.5k标签: babel

都说 ES6 的 Class 是 ES5 的语法糖,那么 ES6 的 Class 是如何实现的呢?其实现继承的原理又是什么呢?不妨我们通过 babel 转译代码的方式,看看其中有什么门道。

这篇文章会从最简单的代码入手,一步步剖析相关的原理以及每个函数的作用。代码的转译直接在 Babel 官网进行即可。


ES6 的 Class 是如何实现的

先从最简单的一个 Parent 类看起:

class Parent{
    constructor(){
        this.a = 1
           this.getA = function(){}
   }
}

转译之后的结果是:

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

var Parent = function Parent() {
    "use strict";

    _classCallCheck(this, Parent);
    this.a = 1;
    this.getA = function () {};
};

可以看到,这里的类实质上就是 ES5 中的构造函数,除了添加实例属性和实例方法之外,它还调用了一个 _classCallCheck 函数。

_classCallCheck 函数

这个函数会接受一个实例和构造函数作为参数,内部的 instance instanceof Constructor 用于判断这个类是不是通过 new 调用的,如果不是就抛出一个错误。

接下来我们尝试给这个类添加原型方法和静态方法:

class Parent{
   constructor(){
     this.a = 1
     this.getA = function(){}
   }
   getB(){}
   getC(){}
   static getD(){}
   static getE(){}
}

转译后得到:

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a 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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var Parent = /*#__PURE__*/ (function () {
  "use strict";

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

    this.a = 1;

    this.getA = function () {};
  }

  _createClass(
    Parent,
    [
      {
        key: "getB",
        value: function getB() {}
      },
      {
        key: "getC",
        value: function getC() {}
      }
    ],
    [
      {
        key: "getD",
        value: function getD() {}
      },
      {
        key: "getE",
        value: function getE() {}
      }
    ]
  );

  return Parent;
})();

emmm 看起来好像有点复杂,不过没关系,我们一个一个函数理清楚就行了。

可以看到,此时的 Parent 变成了一个 IIFE,IIFE 执行之后仍然是返回 Parent 类,但内部还封装了一个 _createClass 函数的调用。

_createClass 函数

_createClass 函数做了什么事呢?首先,它可以接受三个参数:

第一个参数: 类(这里是 Parent 类)
第二个参数:存放对象的数组,每个对象都是关于类的原型方法的特性描述对象(这里是 getB 和 getC)
第三个参数:存放对象的数组,每个对象都是关于类的静态方法的特性描述对象(这里是 getD 和 getE)

接着,它会依次检查是否有传第二个和第三个参数,如果有,就调用 _defineProperties 函数,分别为类的原型定义原型方法,为类本身定义静态方法。

_defineProperties 函数

_defineProperties 函数做了什么事呢?它接受类(或者类的原型)和一个存放对象的数组作为参数,之后遍历数组中的每个对象,定义每个方法的特性,并将它们逐一添加到类(或者类的原型)上面。这里涉及到的特性包括:

enumberable:该属性(方法)是否可枚举。如果方法本身已经定义了该特性,则采用该特性;如果没有定义,则定义该方法为不可枚举
configurable:该属性(方法)是否可以配置
writable:如果该属性是数据属性而不是访问器属性,那么会有一个 value,此时设置该属性为可写


ES6 的继承是如何实现的

好了,基本搞清楚一个 class 的原理之后,现在我们来看一下 ES6 是如何实现继承的。

将下面的代码进行转译:

class Parent{
   constructor(){
     this.a = 1 
     this.getA = function(){} 
   }
   getB(){}  
   getC(){}
   static getD(){}
   static getE(){}
}
class Son extends Parent{
    constructor(){
        super()        
    }
}

就得到了:

"use strict";

function _typeof(obj) {
  "@babel/helpers - typeof";
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function _typeof(obj) {
      return typeof obj;
    };
  } else {
    _typeof = function _typeof(obj) {
      return obj &&
        typeof Symbol === "function" &&
        obj.constructor === Symbol &&
        obj !== Symbol.prototype
        ? "symbol"
        : typeof obj;
    };
  }
  return _typeof(obj);
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { value: subClass, writable: true, configurable: true }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf =
    Object.setPrototypeOf ||
    function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
  return _setPrototypeOf(o, p);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();
  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
      result;
    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }
    return _possibleConstructorReturn(this, result);
  };
}

function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  }
  return _assertThisInitialized(self);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return self;
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;
  try {
    Boolean.prototype.valueOf.call(
      Reflect.construct(Boolean, [], function () {})
    );
    return true;
  } catch (e) {
    return false;
  }
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf
    ? Object.getPrototypeOf
    : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };
  return _getPrototypeOf(o);
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a 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);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

var Parent = /*#__PURE__*/ (function () {
  function Parent() {
    _classCallCheck(this, Parent);

    this.a = 1;

    this.getA = function () {};
  }

  _createClass(
    Parent,
    [
      {
        key: "getB",
        value: function getB() {}
      },
      {
        key: "getC",
        value: function getC() {}
      }
    ],
    [
      {
        key: "getD",
        value: function getD() {}
      },
      {
        key: "getE",
        value: function getE() {}
      }
    ]
  );

  return Parent;
})();

var Son = /*#__PURE__*/ (function (_Parent) {
  _inherits(Son, _Parent);

  var _super = _createSuper(Son);

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

    return _super.call(this);
  }

  return Son;
})(Parent);

emmm 好像越来越复杂了,没事,我们先稍稍简化一下(前面解释过的函数这里就直接略过了),再一个一个慢慢分析:

"use strict";

function _typeof(obj) { ... }

function _inherits(subClass, superClass) { ... }

function _setPrototypeOf(o, p) { ... }

function _createSuper(Derived) { ... }

function _possibleConstructorReturn(self, call) { ... }

function _assertThisInitialized(self) { ... }

function _isNativeReflectConstruct() { ... }

function _getPrototypeOf(o) { ... }

function _classCallCheck() { ... }

function _defineProperties() { ... }

function _createClass() { ... }

var Parent = /*#__PURE__*/ (function () {
  function Parent() { ... }

  _createClass(...);

  return Parent;
})();

var Son = /*#__PURE__*/ (function (_Parent) {
  _inherits(Son, _Parent);

  var _super = _createSuper(Son);

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

    return _super.call(this);
  }

  return Son;
})(Parent);

这里多出了很多新的函数,有的函数不是我们讨论的重点,而且也完全可以单独拎出来分析,所以这里先简单把它们的作用介绍了,之后如果忘记了函数的作用,翻到这里来看即可。

_typeof(obj)
function _typeof(obj) {
  "@babel/helpers - typeof";
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function _typeof(obj) {
      return typeof obj;
    };
  } else {
    _typeof = function _typeof(obj) {
      return obj &&
        typeof Symbol === "function" &&
        obj.constructor === Symbol &&
        obj !== Symbol.prototype
        ? "symbol"
        : typeof obj;
    };
  }
  return _typeof(obj);
}

这是 Babel 引入的一个工具函数,主要是为了对 Symbol 进行正确的处理。它首先会检查当前环境是否支持原生的 Symbol,如果支持就直接返回 typeof obj 表达式的计算结果;如果不支持,再检查 obj 是不是通过 polyfill 实现的 Symbol 的一个实例,如果是就返回它的类型(也就是返回 "symbol"),如果不是,就返回 typeof obj 的计算结果。在这里,这个函数假定了我们当前的环境是原生支持 Symbol 或者通过 polyfill 实现了支持的。

_setPrototypeOf()
function _setPrototypeOf(o, p) {
  _setPrototypeOf =
    Object.setPrototypeOf ||
    function _setPrototypeOf(o, p) {
      o.__proto__ = p;
      return o;
    };
  return _setPrototypeOf(o, p);
}

首先检查当前环境是否支持直接调用 Object.setPrototypeOf() 方法,如果不支持,就通过 __proto__ 手动给实例建立原型关系( __proto__ 是一个暴露的内部属性,一般不提倡直接进行操作)。

_possibleConstructorReturn(self,call)
function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  }
  return _assertThisInitialized(self);
}

如果你看过 new 或者 [[Construct]] 的内部实现,就会知道,给构造函数指定了一个非空对象或者函数作为返回值之后,调用函数之后返回的将不是实例,而是这个对象或者函数。这里就是通过 _possibleConstructorReturn 这个函数来完成这件事的 —— 仔细看它的名字,意思不就是“构造函数可能返回的值”吗?

这个函数接受两个参数,self 代表构造函数的实例,call 代表构造函数的返回值。内部的判断也很简单,call && (_typeof(call) === "object" || typeof call === "function") 是检查 call 的类型,当它是一个对象(注意这里是使用 typeof 进行检查,需要排除可能为 null 的情况)或者函数的时候,直接将其作为返回值;否则就返回 _assertThisInitialized(self)。等等,怎么又来了一个新函数呢?不要急,我们接着就来看这个函数是干什么用的。

_assertThisInitialized(self)
function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return self;
}

看这个函数的名字 —— “断言 this 已经初始化”,也就是说,在调用这个方法的时候,我们期望的结果是 this 已经得到初始化了。这里如果检查发现 this 是 undefined,就会抛出一个错误,提示我们由于没有调用 super(),所以无法得到 this;否则就返回 this 。为什么要使用 void 0 而不是 undefined 呢?因为非严格模式下 undefined 可能会被重写,这里使用 void 0 更加保险。

_isNativeReflectConstruct()
function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;
  try {
    Boolean.prototype.valueOf.call(
      Reflect.construct(Boolean, [], function () {})
    );
    return true;
  } catch (e) {
    return false;
  }
}

这个方法用于检测当前环境是否支持原生的 Reflect。为什么要做这个检查呢?后面我们再来解释。

好了,我们已经分析了这几个函数的作用,现在直接翻到最下面的代码,从 Son 子类看起:

var Son = /*#__PURE__*/ (function (_Parent) {
  _inherits(Son, _Parent);

  var _super = _createSuper(Son);

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

    return _super.call(this);
  }

  return Son;
})(Parent);

这里的 Son 同样是一个 IIFE,并且实际上也是返回一个 Son 子类构造函数,不同的是,它内部还封装了其它方法的调用。我们逐一看一下这些方法的作用。

_inherits(Son,_Parent)
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { 
        value: subClass, 
        writable: true, 
        configurable: true 
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

_inherit 是实现继承的其中一个核心方法,可以说它的本质就是 ES5 中的寄生组合式继承。这个方法接受一个父类和子类作为参数,首先会检查父类是不是函数或者 null,如果不是,则抛出错误(为什么父类可以是 null?从 extends 看 JS 继承这篇文章进行了解释,这里我就不重复了)。

接着,调用 Object.create 设置父类的原型为子类原型的 __proto__。这里我们会看到还传入了第二个参数,这个参数是子类原型的属性的特性描述对象(descriptor),我们对 constructor 属性进行了设置,将它设置为可写、可配置,同时利用 value 修复了因重写子类原型而丢失的 constructor 指向。为什么不设置 enumerable: false 呢?因为默认就是不可枚举的,不设置也行。

最后,我们设置子类的 __proto__ 指向父类,这是 ES5 中没有的,目的是让子类继承父类的静态方法(可以直接通过类调用的方法)。

可以看到,通过调用 _inherit 函数,我们已经成功让子类继承了父类的原型方法和静态方法。不过,实例上的属性怎么继承呢?这就要继续往下看了,接下来我们调用 _createSuper() 函数并传入派生类(子类),这不是重点,重点是它创建并返回的另一个函数 _super。

_super.call(this)
function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();
  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
      result;
    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }
    return _possibleConstructorReturn(this, result);
  };
}

这里的 _createSuperInternal 就是 _super,调用的时候我们绑定了其内部的 this 为子类实例。

它首先会根据之前的 _isNativeReflectConstruct 检查当前环境是否支持 Reflect,如果支持,则执行 result = Reflect.construct(Super, arguments, NewTarget),否则执行 result = Super.apply(this, arguments)。

解释一下这里为什么要优先使用 Reflect。当执行 Reflect.construct(Super, arguments, NewTarget)的时候,最终会返回一个基于 Super 父类构造函数创建的实例,相当于执行了 new Super(...arguments),但是,这个实例的 __proto__ 的 constructor 是 NewTarget,因此在某种程度上,你也可以说这就是一个子类实例,不过它拥有父类实例的所有属性。

可能你会说,这和下面的 Super.apply (借用构造函数继承)不是没区别吗?非也。我们使用 Super.apply 的时候,其实 new.target 属性是会丢失的,就像下面这样:

function Super(){
    console.log(new.target)
}
new Super()       // Super
Super.apply({})   // undefined

但是如果使用 Reflect.consturct 来创建对象,则 new.target 不会丢失:

function Super1(){
    console.log('Super1')
    console.log(new.target)
}
function Super2(){
    console.log('Super2')
    console.log(new.target)
}
const obj1 = Reflect.construct(Super1,{})              
// 'Super1'
//  Super1
const obj2 = Reflect.construct(Super1,{},Super2)
// 'Super1'
//  Super2

可以看到,即便没有通过 new 去调用 Super1,new.target 也仍然指向 Super1;而在传了第三个参数之后,new.target 也没有丢失,只是指向了 Super2(前面我们说过了,某种程度上,可以说 obj1 就是 Super2 的实例)。

所以,这里优先使用 Reflect,是为了保证 new.target 不会丢失。

之后,result 可能有三种取值:

一个继承了父类实例所有属性的子类实例
父类构造函数的调用结果,可能是父类构造函数中自定义返回的一个非空对象
父类构造函数的调用结果,可能是默认返回的 undefined

如何处理这些不同的情况呢?这里调用了前面讲过的 _possibleConstructorReturn(this,result)函数,如果判断 result 是一个非空对象,也就是第一种和第二种取值情况,那么就直接返回 result;否则就是第三种情况了,此时就对当初传进去的子类实例(已经通过 Super.apply 对它进行了增强),也就是 this,进行断言,然后返回出去。

现在,让我们再回到 Son 构造函数。可以看到,调用它之后返回的正是 _super.call(this),也就是返回 result 或者经过增强的this。这里的 result 我们知道也有两种取值,如果是一个继承了父类实例所有属性的子类实例,那么实际上等价于经过增强的 this;如果是父类构造函数中自定义返回的一个非空对象,则意味着调用 Son构造函数之后返回的对象实际上并没有继承父类中声明的实例属性。类似下面这样:

function Parent(){
    this.a = 1
    return {b:1}
}
function Son(){
    return Parent.call(this)
}
Son.prototype.__proto__ = Parent.prortotype
const obj = new Son()
console.log(obj)     
// {b:1}      
// 这里 `Son` 同样也是返回父类 `Parent` 的调用结果(一个对象),它并没有继承在父类上声明的实例属性 `a`。

到这里,我们的分析基本就结束了。

来自:https://segmentfault.com/a/1190000040085339


链接: https://www.fly63.com/article/detial/10363

Babel中的stage-0,stage-1,stage-2以及stage-3的作用(转)

大家知道,将ES6代码编译为ES5时,我们常用到Babel这个编译工具。大家参考一些网上的文章或者官方文档,里面常会建议大家在.babelrc中输入如下代码

深入理解Babel原理及其使用,babel把ES6转成ES5的原理是什么?

文的babel使用场景局限于babel配合webpack来转译输出es5的js代码,babel的命令行、以代码形式调用或node环境下这些统统都不会涉及。Babel使用的难点主要在于理解polyfill、runtime和core-js。

ES6之Babel的各种坑总结【转载】

自从 Babel 由版本5升级到版本6后,在安装和使用方式上与之前大相径庭,于是写了这篇入坑须知,以免被新版本所坑。坑一本地安装和全局安装 、坑二编译插件、坑三babel-polyfill插件

babel-preset-env:一个帮你配置babel的preset

babel-preset-env 一个帮你配置babel的preset,根据配置的目标环境自动采用需要的babel插件。babel-preset-env 功能类似 babel-preset-latest,优点是它会根据目标环境选择不支持的新特性来转译

babel-polyfill使用与性能优化

本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化。babel只负责语法转换,比如将ES6的语法转换成ES5。但如果有些对象、方法,浏览器本身不支持,此时需要引入babel-polyfill来模拟实现这些对象、方法。

babel的初步了解

由于现在前端出现了很多非es5的语法,如jsx,.vue,ts等等的格式和写法。babel其实是一个解释器,它主要讲进行中的代码分为三个阶段执行:解释,转换,生成。

深入类和继承内部原理+Babel和 TypeScript 之间转换

在 JavaScript 中,没有基本类型,创建的所有东西都是对象。例如,创建一个新字符串,与其他语言不同,在 JavaScript 中,字符串或数字的声明会自动创建一个封装值的对象,并提供不同的方法,甚至可以在基本类型上执行这些方法。

使用 Webpack 与 Babel 配置 ES6 开发环境

在项目根目录下新建一个配置文件—— webpack.config.js 文件:执行编译打包命令,完成后打开 bundle.js 文件发现 isNull 和 unique 两个函数没有被编译,和 webpack 官方说法一致:webpack 默认支持 ES6 模块语法,要编译 ES6 代码依然需要 babel 编译器。

Babel_如何写一个Babel插件

Babel对代码进行转换,会将JS代码转换为AST抽象语法树(解析),对树进行静态分析(转换),然后再将语法树转换为JS代码(生成)。每一层树被称为节点。每一层节点都会有type属性,用来描述节点的类型。其他属性用来进一步描述节点的类型。

初学 Babel 工作原理

Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的。我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!