> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/js/val/obj/create/new/new.target.md).

# new\.target

* [JS](/web/js.md) ⟩ [value](/web/js/val.md) ⟩ [object](/web/js/val/obj.md) ⟩ [create](/web/js/val/obj/create.md) ⟩ [new](/web/js/val/obj/create/new.md) ⟩ new\.target

{% hint style="success" %}
a [**function**](/web/js/val/func.md) can know <mark style="color:yellow;">**whether it is invoked with**</mark> [**new**](/web/js/val/obj/create/new.md) by <mark style="color:orange;">**checking**</mark> <mark style="color:purple;">**new\.target**</mark>. <mark style="color:purple;">**new\.target**</mark> is <mark style="color:red;">**only**</mark> [**undefined**](/web/js/val/prim/undefined.md) <mark style="color:yellow;">**when**</mark> the function is <mark style="color:yellow;">**invoked**</mark> <mark style="color:red;">**without**</mark> [**new**](/web/js/val/obj/create/new.md).
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="warning" %}
in <mark style="color:yellow;">**normal function calls**</mark>, <mark style="color:purple;">**new\.target**</mark> is [`undefined`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined).

```javascript
function User(name) {
    // ⭐️ if called normally, add `new`.
    if (!new.target) { return new User(name); }
    this.name = name;
}

let joe = User('Joe');    // ⭐️ `new` not required now
```

{% endhint %}

{% hint style="warning" %}
in <mark style="color:yellow;">**class constructors**</mark> (or <mark style="color:yellow;">**function**</mark> called using <mark style="color:purple;">**new**</mark>), <mark style="color:purple;">**new\.target**</mark> refers to the <mark style="color:yellow;">**constructor**</mark>/<mark style="color:yellow;">**function**</mark> that was directly invoked by <mark style="color:purple;">**new**</mark>. for example:&#x20;

```javascript
new A(); // new.target === A
new B(); // new.target === B
```

:warning: <mark style="color:yellow;">**class constructors**</mark> <mark style="color:red;">**cannot**</mark> be invoked <mark style="color:red;">**without**</mark> '<mark style="color:purple;">**new**</mark>'.
{% endhint %}

{% hint style="success" %} <mark style="color:purple;">**new\.target**</mark> "<mark style="color:orange;">**pseudo-property**</mark>" is **available** in <mark style="color:yellow;">**all functions**</mark>.
{% endhint %}
{% endtab %}

{% tab title="💈範例" %}
:floppy\_disk: replit：[new.target](https://replit.com/@pegasusroe/newtarget#index.js)

```javascript
// ----------------------------------------------------
// in class constructors, `new.target` refers to 
// the constructor that was directly invoked by `new`.
// for example:
//     new A();     // new.target === A
//     new B();     // new.target === B
// ----------------------------------------------------
class A {
    constructor() {
        console.log(`new ${new.target.name}(): new.target === A ? ${new.target === A}`);
    }
}

class B extends A {
    constructor() {
        super();
    }
}

const a = new A();         // new.target === A ? true
const b = new B();         // new.target === A ? false

// A();
// ⛔️ TypeError: Class constructor `A` cannot be invoked without 'new'

// ----------------------------------------------------
// in normal function calls, `new.target` is `undefined`.
// ----------------------------------------------------
function User(name) {
    // ⭐ if called without `new`, add `new` automatically.
    if (!new.target) { return new User(name) }
    this.name = name;
}

let joe = User('Joe');    // ⭐ `new` not required now
console.log(joe.name);    // 'Joe'
```

{% endtab %}

{% tab title="📗 參考" %}

* [ ] JS.info ⟩ [Constructor, operator "new"](https://javascript.info/constructor-new)
  {% endtab %}

{% tab title="📘 手冊" %}

* [new operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new)
* [new.target](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new.target) - detect whether a function/constructor was called using [new](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new).
  {% endtab %}
  {% endtabs %}