ES12 中的 new.target 的使用详解

在 ES6 中,我们已经可以使用 class 关键字来定义类,但是在构造函数内部,我们无法确定调用它的方式是通过 new 还是作为普通函数调用。这时候,ES12 中的 new.target 就可以派上用场了。

new.target 是什么?

new.target 是一个元属性(meta property),它可以在构造函数中使用,返回一个指向构造函数或者派生类的引用。如果构造函数是通过 new 关键字调用的,那么 new.target 就会指向这个构造函数;如果是作为普通函数调用,那么 new.target 就会是 undefined

使用示例

下面是一个简单的示例,展示了 new.target 的基本用法:

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

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

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

Animal 的构造函数中,我们使用 console.log(new.target) 打印出了 new.target 的值,分别是 AnimalDog。这说明在 Dog 的构造函数中,new.target 指向了 Dog

new.target 的应用

1. 防止构造函数被当作普通函数调用

在 ES5 中,我们可以通过在构造函数内部使用 instanceof 来判断它是否是通过 new 关键字调用的,但是这种方式并不完美,因为它只能判断直接调用构造函数的情况,而不能判断通过 callapply 调用的情况。

在 ES6 中,我们可以使用 new.target 来判断构造函数是否被当作普通函数调用。如果是普通函数调用,那么 new.target 就会是 undefined,我们就可以在构造函数内部抛出一个错误来阻止这种情况的发生。

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

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

2. 在派生类中获取基类的构造函数

在派生类中,我们可以使用 super 关键字来调用基类的构造函数。但是如果我们想在派生类中获取基类的构造函数,该怎么办呢?

这时候,new.target 就能够派上用场了。在派生类中,new.target 指向的是派生类的构造函数,我们可以通过 new.target 获取到基类的构造函数。

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

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

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

Dog 的构造函数中,我们使用 console.log(new.target) 打印出了 new.target 的值,发现它指向的是 Dog,然后我们使用 console.log(Animal === new.target) 来比较 Animalnew.target 是否相等,发现它们是相等的,说明我们成功获取到了基类的构造函数。

总结

在 ES12 中,new.target 可以帮助我们判断构造函数是否被当作普通函数调用,以及在派生类中获取基类的构造函数。在实际开发中,我们可以根据 new.target 的值来进行一些特定的操作,例如抛出错误、调用基类的构造函数等。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/65fa3563d10417a222607ea4