ECMAScript 2019（也称作 ES10）是 JavaScript 的最新版本，它引入了许多新特性和语法改进，以增强开发人员的开发体验。其中一项新增的特性是 New Target，它提供了更方便寻找函数的构造函数的方式。但是，New Target 并非所有浏览器都支持，因此在实际应用中，我们需要考虑兼容性问题。本文将介绍如何解决 New Target 的兼容性问题，并提供示例代码。
New Target 的定义
在深入讨论 New Target 的兼容性问题之前，我们先来了解一下什么是 New Target。
New Target 是一个内置对象，它代表了构造函数被调用时的目标对象。实际上，它是在构造函数中创建的，通过 this 关键字访问。如下面的代码示例所示：
function Person() {
console.log(new.target === Person);
}
const person1 = new Person(); // true
const person2 = Person(); // false在上述代码中，我们定义了一个构造函数 Person，当通过 new 关键字调用 Person 时，new.target 指向 Person 构造函数本身。当我们直接调用 Person() 时，new.target 是 undefined。
New Target 的兼容性问题
New Target 在 ECMAScript 2019 版本中被引入，因此并不是所有浏览器都支持它。在不支持的浏览器中，如果你使用 New Target，会导致代码报错或者运行结果与预期不符。
在兼容性方面，目前（截止2021年）部分浏览器已经完全支持 New Target，如 Chrome、Firefox、Safari 和 Edge。但是，还有一些浏览器不支持或者只支持有限的情况，如 Internet Explorer 11 和 Opera Mini。
解决 New Target 的兼容性问题
为了解决 New Target 的兼容性问题，我们可以使用以下几种方法：
方法一：使用 Babel 编译
Babel 是一个流行的 JavaScript 编译器，它可以将 ECMAScript 2019 代码转换为更早版本的 JavaScript 代码。Babel 支持将 New Target 转换为传统的 this 关键字，从而兼容不支持 New Target 的浏览器。
安装 Babel：
npm install --save-dev babel-cli babel-preset-env
编写 .babelrc 文件：
{
"presets": ["env"]
}将 New Target 转换为 this:
function Person() {
console.log(new.target === Person);
console.log(this instanceof Person);
}
const person1 = new Person(); // true true
const person2 = Person(); // false false方法二：使用 typeof 判断
在不支持 New Target 的浏览器中，new.target 会被解释为一个未定义的变量。因此，我们可以使用 typeof 运算符判断 new.target 是否为 'undefined'，从而兼容不支持 New Target 的浏览器。
-- -------------------- ---- -------
-------- -------- -
-- ------- ---------- --- ------------ -
---------------------- --- --------
- ---- -
---------------- ---------- --------
-
-
----- ------- - --- --------- -- ----
----- ------- - --------- -- -----方法三：手动传递父类构造函数
如果你需要访问父类构造函数中的 new.target，而且父类构造函数中也使用了 New Target，那么你需要手动传递父类构造函数以保证兼容性。
-- -------------------- ---- -------
----- ------ -
------------- -
---------------------- --- --------
-
-
----- --- ------- ------ -
------------- -
--------
---------------------- --- -----
-
-
----- ---- - --- ------ -- ---- ----
----- ---- - ------ -- -----结论
New Target 是 ECMAScript 2019 引入的一个新特性，它可以方便地访问构造函数。由于不是所有浏览器都支持 New Target，因此在实际应用中我们需要考虑兼容性问题。本文介绍了三种解决方法，包括使用 Babel 编译、使用 typeof 判断和手动传递父类构造函数，希望能够帮助开发人员写出更兼容的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67125518ad1e889fe2046e71