在学习 JavaScript 的时候，你可能已经听说过 ES2015 或者 ES6 这个名词。这是 JavaScript 的一个新版本，它引入了许多新的语言特性和语法糖，是开发者们工作中需要非常熟悉的技术栈之一。但是，由于不是所有现有的浏览器都支持 ES2015，因此，在开发时，需要将 ES2015 代码转换为 ES5 代码以实现更好的兼容性。这是 Babel 编译器的重要工作之一。在这篇文章中，我们将讨论在 Babel 编译过程中如何处理 ES2015 的 New.target。
什么是 New.target
在 JavaScript 中，当我们使用 new 操作符创建一个对象时，新对象的构造函数会保存在一个特殊的内部属性 [[Construct]] 中。在 ES2015 标准中，New.target 被引入以提供对这个内部属性的访问权限。New.target 是一个 元属性，类似于 arguments、this、super 和 new 等，它的值是调用当前函数的 new 操作符的目标构造函数。在没有使用 new 操作符时，New.target 将为 undefined。
下面是一个 New.target 的使用例子：
-- -------------------- ---- -------
----- ------ -
------------- -
---------------------- --- --------
-
-
----- --- ------- ------ -
------------- -
--------
-
-
----- ------ - --- --------- -- ----
----- --- - --- ------ -- -----上述代码是一个简单的使用 New.target 判断调用构造函数是否为自身的例子。当我们创建一个 Animal 实例时，Animal 构造函数中的 new.target 为 Animal。而当我们创建一个 Dog 实例时，Dog 构造函数继承 Animal 构造函数但执行后，new.target 仍然为 Animal。
如何使用 Babel 处理 New.target
在默认情况下，Babel 会忽略处理 New.target，因为它不是 ES5 的语法要素。如果要使用 New.target 的特性，我们需要为 Babel 添加一个插件。
一些相关的 Babel 的插件已经出现，但是短时间内因为多样的理由都已废弃。目前可选的时新发布的 @babel/plugin-proposal-new-target，用户可以通过 npm 安装:
npm install @babel/plugin-proposal-new-target
在 babel.config.js 中的 plugins 下添加 @babel/plugin-proposal-new-target 即可使用。最后的代码应该类似下面的样子：
-- -------------------- ---- -------
-------------- - -
-------- -
-- ---
--
-------- -
-- ---
-----------------------------------
-
-现在 Babel 已经能够识别 New.target 的语法了，下面是一个使用新插件构建的代码示例：
-- -------------------- ---- -------
----- ------ -
------------- -
---------------------- --- --------
-
-
----- --- ------- ------ -
------------- -
--------
---------------------- --- -----
-
-
----- ------ - --- --------- -- ----
----- --- - --- ------ -- ----在这个例子中，我们将上面的被忽略的代码通过使用新的@babel/plugin-proposal-new-target 插件引入了支持。程序员可以通过直接使用新语言特性变异后直接转换的方式完成调用其他执行器的操作。
总结
在学习 JavaScript 编程时，掌握 ES2015 新特性是非常重要的。由于并不是所有现有浏览器都支持 ES2015，因此需要借助一些工具，如 Babel，将我们的 ES2015 代码转换为 ES5 代码。为了让 Babel 能够识别 New.target 这个新的语言特性，需要使用新版的 @babel/plugin-proposal-new-target 插件。我们希望这篇文章可以帮助你更好地理解和应用 Babel 处理 ES2015 的 New.target。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483fdb748841e9894331b09
