深入浅出——JavaScript 中的 new.target

💦💦💦

在 JavaScript 中，new.target 是一个特殊的内建变量，它代表了当前正在被实例化的构造函数。这个变量主要在构造函数内部使用，以便确定构造函数是作为一个构造函数还是作为一个普通函数被调用的。

函数

function Person() {
    console.log(new.target)
}

Person() // 作为普通函数调用，new.target 是 undefined

new Person() // 使用 new 操作符调用，new.target 是 Person

类

class Person {
    constructor() {
        console.log(new.target)
    }
}

new Person() // 使用 new 操作符调用，new.target 是 Person

Person() // 谷歌浏览器报错：TypeError: Class constructor Person cannot be invoked without 'new'

应用场景

在 class 中用处不大。由于 new.target 的值有两种：undefined 和 函数本身，所以它的使用场景可以有：

1. 约束函数的调用方式，使之仅有一种方式被使用

   function Person(name) {
       if (!new.target) {
           throw new Error('只能被 new 操作符调用！')
       }
   
       this.name = name
   }
   
   Person() // Uncaught Error: 只能被 new 操作符调用！
   

   或

   function Person(name) {
       if (new.target) {
           throw new Error('不能被 new 操作符调用！')
       }
   
       console.log(`name is ${name}`)
   }
   
   new Person('张三') // Uncaught Error: 不能被 new 操作符调用！
   

2. 根据不同的调用方式丰富函数的功能

   function Person(name) {
       if (new.target) {
           this.name = name
       } else {
           console.log(`name is ${name}`)
       }
   
   
   }
   
   console.log(new Person('张三')); // { "name": "张三" }
   
   Person('张三') // name is 张三