Babel：如何解决 Symbol.species 问题？

作为前端开发者，我们需要编写高质量的代码，以确保我们的应用程序具有出色的性能并能够在不同浏览器中良好运行。ES6 是一种使用广泛并且非常有用的 JavaScript 语言，但它在一些比较老的浏览器版本中并不支持。解决这个问题的方法之一是使用 Babel 转译器，它可以将 ES6 转化为 ES5 的代码。但是，使用 Babel 会有一个新的问题，那就是 Symbol.species 的问题。在这篇文章中，我将详细介绍 Babel 的 Symbol.species 问题，并提供解决该问题的指导意义和示例代码。

Symbol.species 是什么？

ES6 引入了 Symbol.species，这是一个 Well-Known Symbol，用于扩展内置对象的继承行为。具体来说，它可以被用来指定一个构造器函数，当创建一个新的对象实例时，它会被用来生成新的衍生对象。例如，Array.prototype.map() 方法在生成衍生数组时使用它。

Babel 的 Symbol.species 问题

当我们使用 Babel 转码 ES6 代码时，经常会遇到 Symbol.species 问题。这是由于 Babel 从 ES6 上下文转换为 ES5 上下文时，继承关系被打破。在 ES6 中使用 Symbol.species 可以确保继承正常运行，但是在 Babel 中，衍生对象会变成错误的类，导致一些异常情况的出现。

如何解决 Babel 的 Symbol.species 问题？

解决 Babel 的 Symbol.species 问题并不难，我们只需要使用一个 Babel 插件：@babel/plugin-transform-runtime。该插件是 Babel 中的一个小型运行时库，它可以通过 ES2015 运行时的专用版本来解决 Symbol.species 问题。

步骤如下：

1. 安装 @babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime

1. 在 .babelrc 中添加插件

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3
    }]
  ]
}

1. 修改代码

将 ES6 代码：

class MyArray extends Array {
  static get [Symbol.species]() {
    return Array;
  }
}

改为：

import Symbol from 'core-js-pure/features/symbol';
import { wrapNativeSuper } from 'core-js-pure/features/object';

class MyArray extends wrapNativeSuper(Array) {
  static get [Symbol.species]() {
    return Array;
  }
}

在修改后的代码中，我们使用 core-js-pure 库提供的 Symbol.species 和 wrapNativeSuper 方法，以确保符号在 Babel 中工作。

示例代码

-- -------------------- ---- -------
------ ------ ---- -------------------------------
------ - --------------- - ---- -------------------------------

----- ------- ------- ---------------------- -
  ------ --- ------------------ -
    ------ ------
  -
-

----- ------- - --- ---------- -- ---
----- ------ - ------------- -- - - ---

------------------ ---------- --------- -- -----
------------------ ---------- ------- -- ----

在这个示例代码中，我们定义了一个新的 MyArray 类，使用 Symbol.species 指定其类型为 Array。在应用程序中，我们可以创建 MyArray 的实例，然后使用 map() 方法生成衍生对象。我们在控制台中输出衍生对象的实例类型，可以看到 mapped 不再是 MyArray 的实例，而是 Array 的实例。

结论

在使用 Babel 转换 ES6 代码时，我们需要特别注意 Symbol.species 的问题，其中一个解决方案是使用 @babel/plugin-transform-runtime 插件和 core-js-pure 库来保证符号在 Babel 中正常工作。当我们掌握了如何解决这个问题后，我们就可以编写具有更高质量的代码，并且能够在老的浏览器中正常运行。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fbafc3447136260160a122