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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
|
---
title: コンストラクター
slug: Web/JavaScript/Reference/Classes/constructor
tags:
- Classes
- ECMAScript 2015
- JavaScript
- Language feature
translation_of: Web/JavaScript/Reference/Classes/constructor
---
<div>{{jsSidebar("Classes")}}</div>
<p><span class="seoSummary"><code>constructor</code> メソッドは、 {{jsxref("Statements/class", "class")}} で作成されたオブジェクトの生成と初期化のための特殊なメソッドです。</span></p>
<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div>
<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate">constructor([<var>arguments</var>]) { ... }</pre>
<h2 id="Description" name="Description">解説</h2>
<p>コンストラクターを使用すると、インスタンス化されたオブジェクトに対して、他のメソッドを呼び出す前に行う必要のある独自の初期化を提供することができます。</p>
<pre class="brush: js notranslate">class Person {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`Hello, my name is ${this.name}`);
}
}
const otto = new Person('Otto');
otto.introduce();</pre>
<p>独自のコンストラクターを提供しなかった場合は、既定のコンストラクターが提供されます。クラスが基底クラスである場合、既定のコンストラクターは空です。</p>
<pre class="brush: js notranslate">constructor() {}</pre>
<p>クラスが派生クラスの場合、既定のコンストラクターが親コンストラクターを呼び出し、与えられた引数を渡します。</p>
<pre class="brush: js notranslate">constructor(...args) {
super(...args);
}</pre>
<p>それがこのようなコードを動作させることができます。</p>
<pre class="brush: js notranslate">class ValidationError extends Error {
printCustomerMessage() {
return `Validation failed :-( (details: ${this.message})`;
}
}
try {
throw new ValidationError("Not a valid phone number");
} catch (error) {
if (error instanceof ValidationError) {
console.log(error.name); // This is Error instead of ValidationError!
console.log(error.printCustomerMessage());
} else {
console.log('Unknown error', error);
throw error;
}
}</pre>
<p><code>ValidationError</code> クラスは、独自の初期化を行う必要がないため、明示的なコンストラクターは必要ありません。既定のコンストラクターは、与えられた引数から親の <code>Error</code> の初期化を行います。</p>
<p>ただし、独自のコンストラクターを提供し、クラスが親クラスから派生している場合は、 <code>super</code> を使用して親クラスのコンストラクターを明示的に呼び出す必要があります。例えば、以下のようになります。</p>
<pre class="brush: js notranslate">class ValidationError extends Error {
constructor(message) {
super(message); // call parent class constructor
this.name = 'ValidationError';
this.code = '42';
}
printCustomerMessage() {
return `Validation failed :-( (details: ${this.message}, code: ${this.code})`;
}
}
try {
throw new ValidationError("Not a valid phone number");
} catch (error) {
if (error instanceof ValidationError) {
console.log(error.name); // Now this is ValidationError!
console.log(error.printCustomerMessage());
} else {
console.log('Unknown error', error);
throw error;
}
}
</pre>
<p>クラスには "<code>constructor</code>" という名前の特別なメソッドが 1 つだけ存在します。クラス内に複数の <code>constructor</code> メソッドが存在すると、 {{jsxref("SyntaxError")}} エラーが発生します。</p>
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Using_the_constructor_method" name="Using_the_constructor_method">constructor メソッドの使用</h3>
<p>このコードスニペットは、<a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">ライブデモ</a>) から転載しています。</p>
<pre class="brush: js notranslate">class Square extends Polygon {
constructor(length) {
// Here, it calls the parent class' constructor with lengths
// provided for the Polygon's width and height
super(length, length);
// NOTE: In derived classes, `super()` must be called before you
// can use `this`. Leaving this out will cause a ReferenceError.
this.name = 'Square';
}
get area() {
return this.height * this.width;
}
set area(value) {
this.height = value**0.5;
this.width = value**0.5;
}
}</pre>
<h3 id="Another_example" name="Another_example">他の例</h3>
<p>ここでは、 <code>Square</code> クラスのプロトタイプが変更されていますが、新しいインスタンスが作成されたときには、その基底クラスである <code>Polygon</code> のコンストラクターが呼び出されます。</p>
<pre class="brush: js notranslate">class Polygon {
constructor() {
this.name = "Polygon";
}
}
class Square extends Polygon {
constructor() {
super();
}
}
class Rectangle {}
Object.setPrototypeOf(Square.prototype, Rectangle.prototype);
console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false
console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true
let newInstance = new Square();
console.log(newInstance.name); //Polygon</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-static-semantics-constructormethod', 'Constructor Method')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("javascript.classes.constructor")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{jsxref("Operators/super", "super()")}}</li>
<li>{{jsxref("Statements/class", "クラス宣言", "", "true")}}</li>
<li>{{jsxref("Operators/class", "クラス式", "", "true")}}</li>
<li>{{jsxref("Classes")}}</li>
<li><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">Object.prototype.constructor</a></li>
</ul>
|
