aboutsummaryrefslogtreecommitdiff
path: root/files/ja/web/javascript/reference/global_objects/reflect/construct/index.html
blob: f16711c6f7f51ae0c7706e5b656b09e52b58b415 (plain)
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
---
title: Reflect.construct()
slug: Web/JavaScript/Reference/Global_Objects/Reflect/construct
tags:
  - ECMAScript 2015
  - JavaScript
  - Method
  - Reference
  - Reflect
  - メソッド
translation_of: Web/JavaScript/Reference/Global_Objects/Reflect/construct
---
<div>{{JSRef}}</div>

<p>静的な <code><strong>Reflect.construct()</strong></code> メソッドは {{jsxref("Operators/new", "new")}} 演算子のように、ただし関数として動作します。これは <code>new target(...args)</code> の呼び出しと同等です。このメソッドはオプションを追加することで、別なプロトタイプを指定することができます。</p>

<div>{{EmbedInteractiveExample("pages/js/reflect-construct.html", "taller")}}</div>

<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox">Reflect.construct(<var>target</var>, <var>argumentsList</var>[, <var>newTarget</var>])
</pre>

<h3 id="Parameters" name="Parameters">引数</h3>

<dl>
 <dt><code><var>target</var></code></dt>
 <dd>呼び出し対象の関数。</dd>
 <dt><code><var>argumentsList</var></code></dt>
 <dd>配列風オブジェクトで、 <code><var>target</var></code> の呼び出しの引数を指定する。</dd>
 <dt><code><var>newTarget</var></code> {{optional_inline}}</dt>
 <dd>プロトタイプを使用するコンストラクター。 <a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target"><code>new.target</code></a> も参照してください。 <code><var>newTarget</var></code> が存在しない場合は、既定値は <code><var>target</var></code> になります。</dd>
</dl>

<h3 id="Return_value" name="Return_value">返値</h3>

<p><code><var>target</var></code> (または、もしあれば <code><var>newTarget</var></code>) の新しいインスタンスで、 <code><var>target</var></code><code><var>argumentsList</var></code> を渡してコンストラクターとして呼び出すことで初期化します。</p>

<h3 id="Exceptions" name="Exceptions">例外</h3>

<p>{{jsxref("TypeError")}}: <code><var>target</var></code> または <code><var>newTarget</var></code> がコンストラクターではない場合。</p>

<h2 id="Description" name="Description">解説</h2>

<p><code>Reflect.construct()</code> によって、可変長引数を指定してコンストラクターを呼び出すことができます。 (これは a href="/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax"&gt;スプレッド構文と<a href="/ja/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> 演算子</a> を組み合わせて使用することでも可能です。)</p>

<pre class="brush: js">let obj = new Foo(...<var>args</var>)
let obj = Reflect.construct(Foo, <var>args</var>)
</pre>

<h3 id="Reflect.construct_vs_Object.create" name="Reflect.construct_vs_Object.create"><code>Reflect.construct()</code><code>Object.create()</code></h3>

<p><code>Reflect</code> が導入される前は、オブジェクトを構築するのにコンストラクターとプロトタイプの任意の組み合わせで {{jsxref("Object.create()")}} を使用して構築することができました。</p>

<pre class="brush: js">function OneClass() {
    this.name = 'one'
}

function OtherClass() {
    this.name = 'other'
}

// この呼び出しは、
let obj1 = Reflect.construct(OneClass, <var>args</var>, OtherClass)

// ...これと同じ結果をもたらします。
let obj2 = Object.create(OtherClass.prototype)
OneClass.apply(obj2, <var>args</var>)

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>この2つの手法の最終結果は同じですが、その過程に重要な違いがあります。 <code>Object.create()</code>{{jsxref("Function.prototype.apply()")}} を使用する場合、 <code>new.target</code> 演算子はコンストラクター内で <code>undefined</code> を返します。これは、 <code>new</code> 演算子を用いないためです。</p>

<p>一方、 <code>Reflect.construct()</code> を呼び出す場合は、 <code>new.target</code> 演算子は、提供されていれば <code><var>newTarget</var></code> を指し、そうでなければ <code>target</code> を指します。</p>

<pre class="brush: js">function OneClass() {
    console.log('OneClass')
    console.log(new.target)
}
function OtherClass() {
    console.log('OtherClass')
    console.log(new.target)
}

let obj1 = Reflect.construct(OneClass, <var>args</var>)
// Output:
//     OneClass
//     function OneClass { ... }

let obj2 = Reflect.construct(OneClass, <var>args</var>, OtherClass)
// Output:
//     OneClass
//     function OtherClass { ... }

let obj3 = Object.create(OtherClass.prototype);
OneClass.apply(obj3, <var>args</var>)
// Output:
//     OneClass
//     undefined
</pre>

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

<h3 id="Using_Reflect.construct" name="Using_Reflect.construct"><code>Reflect.construct()</code> の使用</h3>

<pre class="brush: js">let d = Reflect.construct(Date, [1776, 6, 4])
d instanceof Date  // true
d.getFullYear()    // 1776
</pre>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-reflect.construct', 'Reflect.construct')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("javascript.builtins.Reflect.construct")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{jsxref("Reflect")}}</li>
 <li>{{jsxref("Operators/new", "new")}}</li>
 <li><code><a href="/ja/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code></li>
</ul>