随着 Web 应用的不断复杂化，前端开发中对象构造器的自定义需求越来越高。ES7 中新增的 Symbol.species 可以帮助我们实现对象构造器的自定义。在本文中，我们会详细介绍 Symbol.species 的使用方法、实现原理以及其在前端开发中的指导意义。
什么是 Symbol.species
Symbol.species 是 ES7 中新增的一个 Symbols 属性。它可以用来控制一个对象在进行类型转换时返回的构造函数。
在默认情况下，当一个对象进行类型转换时（比如使用 Array.from 将一个类数组对象转换为数组），返回的构造函数是对象本身的构造函数。例如：
-- -------------------- ---- ------- ----- ------- ------- ----- - - ----- ------- - --- ---------- -- --- --------------------------------- -- ------- ----- --- - -------------------- ----------------------------- -- -----
在上面的例子中，myArray 是一个继承自 Array 的自定义数组对象，它的构造函数是 MyArray。当我们使用 Array.from 将 myArray 转换为数组时，返回的数组的构造函数是 Array，而不是 MyArray。这会导致一些问题，例如在构造函数中定义的静态属性和方法在转换后可能会丢失。
在这种情况下，我们可以使用 Symbol.species 来控制类型转换时的构造函数。比如，我们可以将上面的例子改成：
-- -------------------- ---- -------
----- ------- ------- ----- -
------ --- ------------------ -
------ ------
-
-
----- ------- - --- ---------- -- ---
--------------------------------- -- -------
----- --- - --------------------
----------------------------- -- -----在上面的例子中，我们通过在 MyArray 类中定义 Symbol.species 属性来控制 Array.from 方法的返回值构造函数为 Array。这样，当我们使用 Array.from 转换 myArray 时，返回的构造函数就是 Array。
实现原理
在上面的例子中，我们简单介绍了使用 Symbol.species 控制类型转换时的构造函数。那么，Symbol.species 的实现原理是什么呢？
在 es6-shim 中（一个 ES6 的兼容性库），定义了一个 _species 私有属性来实现 Symbol.species：
function SpeciesConstructor(O, defaultConstructor) {
const C = O.constructor;
const S = typeof Symbol === 'function' && Symbol.species && C[Symbol.species];
return S != null ? S : defaultConstructor;
}在类型转换时，es6-shim 会使用 _species 来判断构造函数。
在 ES7 中，Symbol.species 的实现与 es6-shim 类似。当一个对象进行类型转换时，会先检查对象的构造函数是否有 Symbol.species 属性。如果有，则使用 Symbol.species 属性指定的构造函数，否则使用对象本身的构造函数。
指导意义
Symbol.species 的出现使得我们可以更方便地控制对象的构造函数。它特别适合用来实现自定义对象构造器。
在前端开发中，我们通常会使用一些基础 UI 库来构建 Web 应用。但是，这些库中的组件在某些情况下并不能完全满足我们的需求。可扩展的自定义组件就成了必要。
在实现自定义组件时，我们需要继承一些基础组件，并添加我们自己的代码。而且，我们需要确保自定义组件只返回我们定义的构造函数。这时，我们就可以使用 Symbol.species 来控制类型转换时的构造函数。例如，我们可以这样定义一个继承自基础组件的自定义组件：
class MyComponent extends BaseComponent {
static get [Symbol.species]() {
return MyComponent;
}
}在这个例子中，我们将自定义组件的 Symbol.species 设置为自身，这样无论何时转换类型，都会返回自定义组件的构造函数。
示例代码
以下是一个使用 Symbol.species 的示例代码，它实现了自定义数组：
-- -------------------- ---- -------
----- ------- ------- ----- -
------ --- ------------------ -
------ ------
-
-------------------- -
---------------
--------------------------- ------------ -
------ ----
---
-
-
----- ------- - --- ---------- -- ---
--------------------------------- -- -------
----- --- - --------------------
----------------------------- -- -----
--------------------------- -- ---------
------------------------------- -- ----在这个例子中，我们定义了一个继承自 Array 的自定义数组对象 MyArray。我们通过定义 Symbol.species 属性，控制了 Array.from 方法返回的构造函数为原生 Array。
我们还在 MyArray 的构造函数中添加了一个属性 isMyArray，用来判断一个数组对象是否是自定义数组。我们可以通过以下代码进行测试：
-- -------------------- ---- ------- ----- ------- - --- ---------- -- --- --------------------------------- -- ------- ----- --- - -------------------- ----------------------------- -- ----- --------------------------- -- --------- ------------------------------- -- ----
在运行上面的代码后，我们会发现，myArray 的构造函数是 MyArray，而 arr 的构造函数是 Array。而且，myArray.isMyArray 返回 true，而 arr.isMyArray 返回 undefined。
结论
Symbol.species 是一个非常有用的 Symbols 属性，它可以帮助我们控制对象在类型转换时返回的构造函数。在前端开发中，我们可以利用它来实现自定义组件，并确保返回自定义组件的构造函数。
当然，Symbol.species 并不是解决所有问题的万能工具。我们仍然需要根据具体情况选取合适的方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670b6cc0d91dce0dc88a6b3f