Revision 913449 of new.target

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

<p>The<strong> <code>new.target</code></strong> syntax is available in all functions. In constructors, <code>new.target</code> refers to the constructor that was invoked by <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code>. 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 new.target 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 a constructor calls, however, <code>new.target</code> refers the constructor invoked by <code>new</code> and so "<code>new.</code>" becomes a virtual context here.</p>

<p><code>new.target</code> 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><code>new.target</code> 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 or not:</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"><code>new.target</code> 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>