Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 917327 of new.target

  • Revision slug: Web/JavaScript/Reference/Operators/new.target
  • Revision title: new.target
  • Revision id: 917327
  • Created:
  • Creator: jpmedley
  • Is current revision? No
  • Comment

Revision Content

{{JSSidebar("Operators")}} {{Harmony}}

The new.target property lets you detect whether a function or constructor was called using the new operator. In constructors and functions instantiated with the new operator, new.target returns a reference to the constructor or function. In normal function calls, new.target is {{jsxref("undefined")}}.

Syntax

new.target

Description

The new.target syntax consists of the keyword "new", a dot, and a property name "target". Normally "new." serves as the context for a property access, but here "new." is not really an object. In constructor calls, however, new.target refers the constructor invoked by new and so "new." becomes a virtual context.

The new.target property is a meta property that is available to all functions. In arrow functions, new.target refers to the new.target of the surrounding function.

Examples

new.target in function calls

In normal function calls (as opposed to constructor function calls), new.target is {{jsxref("undefined")}}. This lets you detect if a function was called with new as a constructor.

function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"

new.target in constructors

In class constructors, new.target refers to the constructor that was directly invoked by new. This is also the case if the constructor is in a parent class and was delegated from a child constructor.

class A {
  constructor() {
    console.log(new.target.name);
  }
}

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

var a = new A(); // logs "A"
var b = new B(); // logs "B"

Specifications

Specification Status Comment
{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}} {{Spec2('ES6')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatNo}} {{CompatGeckoDesktop(41)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatNo}} {{CompatNo}} {{CompatGeckoMobile(41)}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

See also

Revision Source

<div>{{JSSidebar("Operators")}} {{Harmony}}</div>

<p>The<strong> <code>new.target</code></strong>&nbsp;property lets you detect whether a function or constructor was called using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> operator. In constructors and functions instantiated with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> operator, <code>new.target</code> returns a reference to the constructor or function.&nbsp;In normal function calls, <code>new.target</code> is {{jsxref("undefined")}}.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="syntaxbox">
new.target</pre>

<h2 id="Description">Description</h2>

<p>The <code>new.target</code> syntax consists of the keyword <code>"new</code>", a dot, and a property name <code>"target"</code>. Normally "<code>new."</code> serves as the context for a property access, but here <code>"new."</code> is not really an object. In constructor calls, however, <code>new.target</code> refers the constructor invoked by <code>new</code> and so "<code>new.</code>" becomes a virtual context.</p>

<p>The&nbsp;<code>new.target</code>&nbsp;property is a meta property that is available to all functions. In <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a>, <code>new.target</code> refers to the <code>new.target</code> of the surrounding function.</p>

<h2 id="Examples">Examples</h2>

<h3 id="new.target_in_function_calls">new.target in function calls</h3>

<p>In normal function calls (as opposed to constructor function calls), <code>new.target</code> is {{jsxref("undefined")}}. This lets you detect if a function was called&nbsp;with <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a> as a constructor.</p>

<pre class="brush: js">
function Foo() {
  if (!new.target) throw "Foo() must be called with new";
  console.log("Foo instantiated with new");
}

Foo(); // throws "Foo() must be called with new"
new Foo(); // logs "Foo instantiated with new"
</pre>

<h3 id="new.target_in_constructors">new.target in constructors</h3>

<p>In class constructors, <code>new.target</code> refers to the constructor that was directly invoked by <code>new</code>. This is also the case if the constructor is in a parent class and was delegated from a child constructor.</p>

<pre class="brush: js">
class A {
  constructor() {
    console.log(new.target.name);
  }
}

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

var a = new A(); // logs "A"
var b = new B(); // logs "B"
</pre>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-built-in-function-objects', 'Built-in Function Objects')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoDesktop(41)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatGeckoMobile(41)}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code></li>
</ul>
Revert to this revision