1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: Reflect.construct()
slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
---
<div>{{JSRef}}</div>
<p>The static <code><strong>Reflect</strong></code><strong><code>.construct()</code></strong> method acts like the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, but as a function. It is equivalent to calling <code>new target(...args)</code>. It gives also the added option to specify a different prototype.</p>
<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html")}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<pre class="syntaxbox">Reflect.construct(target, argumentsList[, newTarget])
</pre>
<h3 id="Parametros">Parametros</h3>
<dl>
<dt><code>target</code></dt>
<dd>A função alvo à ser chamada.</dd>
<dt><code>argumentsList</code></dt>
<dd>Um objeto tipo array que especifica com quais argumentos <code>target</code> deveria ser chamada.</dd>
<dt><code>newTarget</code> {{optional_inline}}</dt>
<dd>O construtor de quem o protótipo deveria ser usado. Veja também o <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code> operador. Se <code>newTarget</code> não estiver presente, será <code>target</code>.</dd>
</dl>
<h3 id="Return_value">Return value</h3>
<p>A new instance of <code>target</code> (or <code>newTarget</code>, if present), initialized by <code>target</code> as a constructor with the given arguments.</p>
<h3 id="Exceptions">Exceptions</h3>
<p>A {{jsxref("TypeError")}}, if <code>target</code> or <code>newTarget</code> are not constructors.</p>
<h2 id="Description">Description</h2>
<p><code>Reflect.construct</code> allows you to invoke a constructor with a variable number of arguments (which would also be possible by using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator">spread operator</a> combined with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>).</p>
<pre class="brush: js">var obj = new Foo(...args);
var obj = Reflect.construct(Foo, args);
</pre>
<p> </p>
<h3 id="Reflect.construct()_vs_Object.create()"><code>Reflect.construct()</code> vs <code>Object.create()</code></h3>
<p>Prior to the introduction of <code>Reflect</code>, objects could be constructed using an arbitrary combination of constructor and prototype by using <code>Object.create()</code>.</p>
<pre class="brush: js">function OneClass() {
this.name = 'one';
}
function OtherClass() {
this.name = 'other';
}
// Calling this:
var obj1 = Reflect.construct(OneClass, args, OtherClass);
// ...has the same result as this:
var obj2 = Object.create(OtherClass.prototype);
OneClass.apply(obj2, args);
console.log(obj1.name); // 'one'
console.log(obj2.name); // 'one'
console.log(obj1 instanceof OneClass); // false
console.log(obj2 instanceof OneClass); // false
console.log(obj1 instanceof OtherClass); // true
console.log(obj2 instanceof OtherClass); // true
</pre>
<p>However, while the end result is the same, there is one important difference in the process. When using <code>Object.create()</code> and <code>Function.prototype.apply()</code>, the <code>new.target</code> operator will point to <code>undefined</code> within the function used as the constructor, since the <code>new</code> keyword is not being used to create the object.</p>
<p>When invoking <code>Reflect.construct()</code>, on the other hand, the <code>new.target</code> operator will point to the <code>newTarget</code> parameter if supplied, or <code>target</code> if not.</p>
<pre class="brush: js">function OneClass() {
console.log('OneClass');
console.log(new.target);
}
function OtherClass() {
console.log('OtherClass');
console.log(new.target);
}
var obj1 = Reflect.construct(OneClass, args);
// Output:
// OneClass
// function OneClass { ... }
var obj2 = Reflect.construct(OneClass, args, OtherClass);
// Output:
// OneClass
// function OtherClass { ... }
var obj3 = Object.create(OtherClass.prototype);
OneClass.apply(obj3, args);
// Output:
// OneClass
// undefined</pre>
<p> </p>
<h2 id="Examples">Examples</h2>
<h3 id="Using_Reflect.construct()">Using <code>Reflect.construct()</code></h3>
<pre class="brush: js">var d = Reflect.construct(Date, [1776, 6, 4]);
d instanceof Date; // true
d.getFullYear(); // 1776
</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('ES2015', '#sec-reflect.construct', 'Reflect.construct')}}</td>
<td>{{Spec2('ES2015')}}</td>
<td>Initial definition.</td>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{jsxref("Reflect")}}</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code></a></li>
<li><code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li>
</ul>
|
