teratail
回答率
85.30%
質問するログイン新規登録
トップJavaScriptに関する質問JavaScript】コンストラクタの概念が分かりません

編集履歴

回答編集履歴

8

console.logの割り当て等、不足説明追加

2019/06/06 02:40

投稿

退会済みユーザー
answer CHANGED
@@ -18,19 +18,24 @@
18
18
 
19
19
 
20
20
  ```js
21
+ "use strict";
22
+
23
+ /* console.logと毎回書くのは面倒&見づらいゆえ、`_`(アンダースコア)に割り当て */
24
+ let _ = console.log;
25
+
21
26
  function AirMax(){
22
27
  this.brand = "Nike";
23
28
  this.shoesType = "Air Max";
24
- }
29
+ };
25
30
 
26
31
  let airMax1 = new AirMax(),
27
32
  airMax2 = new AirMax();
28
33
 
29
- _( airMax1.brand ) //-> "Nike"
34
+ _( airMax1.brand ); //-> "Nike"
30
- _( airMax1.shoesType ) //-> "Air Max"
35
+ _( airMax1.shoesType ); //-> "Air Max"
31
36
 
32
- _( airMax2.brand ) //-> "Nike"
37
+ _( airMax2.brand ); //-> "Nike"
33
- _( airMax2.shoesType ) //-> "Air Max"
38
+ _( airMax2.shoesType ); //-> "Air Max"
34
39
  ```
35
40
 
36
41
 
@@ -58,8 +63,8 @@
58
63
  let airMax1 = new AirMax("Taro"),
59
64
  airMax2 = new AirMax("Hana");
60
65
 
61
- _( airMax1.owner ) //-> "Taro"
66
+ _( airMax1.owner ); //-> "Taro"
62
- _( airMax2.owner ) //-> "Hana"
67
+ _( airMax2.owner ); //-> "Hana"
63
68
 
64
69
  ```
65
70
 

7

追記 正完了

2019/06/06 02:40

投稿

退会済みユーザー
answer CHANGED
@@ -1,4 +1,4 @@
1
- ## コンストラクター関数
1
+ # コンストラクター関数
2
2
  コンストラクターとは、正確にはコンストラクター関数であり、現実で例えると、工場の製造機のようなものです。
3
3
 
4
4
  例えば、ナイキの靴の製造機を想像して下さい。エアーマックスという種類の靴を製造してくれる機械があったとします。その製造機はいくつも同じエアーマックスを製造してくれます。
@@ -38,11 +38,14 @@
38
38
 
39
39
  `new` + `コンストラクター関数` によって物体を作成する事を、プログミングでは**具現化する**と言い、作成された物体`airMax1`/`airMax2`を**具現物**と言います。
40
40
 
41
+ **新しく具現化され返却された物体は、コンストラクター関数内で定義された性質・術が初期値化されています。**
41
42
 
43
+
42
- ## 少しだけ違うものを具現化する
44
+ # 少しだけ違うものを具現化する
43
45
  先の例では、具現物が全く同じものばかりになってしまいます。
44
46
 
45
47
  そこで、少し違うものを作りたい場合、例えば先の靴の例で言えば「靴に買った人の名前を入れる」事にします。そういう場合は、具現化時に、コンストラクター関数に引数として名前を渡せるように、コンストラクター関数を少し変更します。
48
+
46
49
  ```js
47
50
  function AirMax(name){
48
51
  this.brand = "Nike";
@@ -60,18 +63,19 @@
60
63
 
61
64
  ```
62
65
 
63
- ## まとめ
66
+ # まとめ
64
67
  上記の靴は、分かりやすい現実の例で例えました。既知かもですが、プログミングでは、物理的なものだけに限らず、あらゆるの物事を物体(オブジェクト)で表すことが出来ます。
65
68
 
66
- ## 用語
69
+ # 用語
67
70
  (カタカナ用語は分かりにくいので、日本語にして説明しました)
68
71
 
69
- | 私訳 | 既存訳 |
72
+ | 私訳 | 既存訳 |
70
73
  |--------------|--------------------------------|
74
+ | 組み立て係 | コンストラクター(constructor) |
71
- | 物体 | オブジェクト(object) |
75
+ | 物体 | オブジェクト(object) |
72
- |具現化する | インスタンシエイト(instantiate) |
76
+ | 具現化する | インスタンシエイト(instantiate) |
73
- |具現物 | インスタンス(instance) |
77
+ | 具現物 | インスタンス(instance) |
74
- |製造機 | コンストラクター(constructor) |
78
+ | 初期値化する | 初期化する(initialize) |
75
79
  | 性質 |プロパティ(property) |
76
80
  | 術 | メソッド(method) |
77
81
 
@@ -82,4 +86,48 @@
82
86
 
83
87
  という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????(新たな独自用語がて出てきて分からない場合は、上の**用語**を参照下さい。追記しておきましたゆえ(｡•ㅅ•｡))
84
88
 
89
+ **上記の回答部分に一文追記しました。重要部分&追記明瞭化のため、一文が太字になっています。**
90
+
91
+ # 通常の関数とコンストラクタ関数との違い
92
+
93
+ 通常関数とコンストラクタの違いを、表にして比較してみました。
94
+
95
+ | | 通常関数 | コンストラクタ |
96
+ | ------- | ------- | -------- |
97
+ | ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
98
+ | ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
99
+ | ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
100
+ | ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術が初期値化されている |
101
+
102
+
85
- **(追記したのですが、一部誤りが発覚したため、一時取り下げしました???????? 訂正後、再アップしますので、少々お待ち下さい(｡•ㅅ•｡)????)**
103
+ どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
104
+
105
+ 僕も最初はそうでしたが、ややこしい・わかった様な分からない様な…と感じる理由は
106
+
107
+ - どちらも`function`を使って定義されいる(関数である)
108
+ - 定義が抽象的
109
+
110
+ だからが大きい気がします。ですので、以下に分かりやすよう、コンストラクタ関数を`function`キーワードを用ず書き直してみました。
111
+
112
+ **通常関数**
113
+
114
+ ```js
115
+ function greetingTo( val ){
116
+ console.log("おはよう、"+ val);
117
+ };
118
+
119
+ greetingTo("悟空"); // "おはよう、悟空"
120
+ ```
121
+
122
+ **コンストラクタ関数**
123
+
124
+ ```js
125
+ CONSTRUCTOR AirMax(){
126
+ this.brand = "Nike";
127
+ this.shoesType = "Air Max";
128
+ };
129
+
130
+ new AirMax(); // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
131
+ ```
132
+
133
+ こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。

6

追記部 一時取り下げ

2019/06/05 06:38

投稿

退会済みユーザー
answer CHANGED
@@ -82,106 +82,4 @@
82
82
 
83
83
  という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????(新たな独自用語がて出てきて分からない場合は、上の**用語**を参照下さい。追記しておきましたゆえ(｡•ㅅ•｡))
84
84
 
85
- # 通常の関数とコンストラクタ関数との違い
86
- どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
85
+ **(追記したのですが、一部誤りが発覚したため、一時取り下げしました???????? 訂正後、再アップしますので、少々お待ち下さい(｡•ㅅ•｡)????)**
87
-
88
- ですので、分かりやすようコンストラクタ関数を`function`キーワードを用ず書き直してみました。
89
-
90
- **通常関数**
91
- ```js
92
- function greetingTo( val ){
93
- console.log("おはよう、"+ val);
94
- };
95
-
96
- greetingTo("悟空"); // "おはよう、悟空"
97
- ```
98
-
99
- **コンストラクタ**
100
- ```js
101
- CONSTRUCTOR AirMax(){
102
- this.brand = "Nike";
103
- this.shoesType = "Air Max";
104
- };
105
-
106
- new AirMax(); // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
107
- ```
108
-
109
- こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。
110
-
111
- 通常関数とコンストラクタの使用目的・呼び出し方の違いは以下の通りです。
112
-
113
- | | 通常関数 | コンストラクタ |
114
- | ------- | ------- | -------- |
115
- | ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
116
- | ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
117
- | ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
118
- | ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術を継承 |
119
-
120
- このように、全てにおいて違います。
121
-
122
- **ややこしいと感じる理由は、元のコードがどちらも`function`キーワードを使って定義されているから**です。コンストラクタは`function`というキーワードこそ使いますが、全くの別物だと思っておいて結構です。
123
-
124
- いいでしょうか。それでは書き方を元に戻しつつ、細かな違いやややこしさの詳細を見ていきましょう。
125
-
126
- # ややこしい理由
127
- ## どちらも`function`キーワードを使って定義する
128
- これは上記の通りです。
129
-
130
- ## コンストラクタ関数の定義が抽象的すぎる
131
- > **定義**
132
- > コンストラクタ関数とは、`new`操作記号によって呼び出された関数である。具現化された物体を返却する。
133
-
134
- ??。定義は確かにこれで合っています。が、コンストラクタ関数を初めて学ぶ人には、おそらく意味が全く分かりません。
135
-
136
- つまりこういう事です。
137
-
138
- 先ほどの、通常関数とコンストラクタの違いの表をもう一度見た後に、以下を見てください。
139
-
140
- **通常関数**
141
-
142
- ```js
143
- function greetingTo( val ){
144
- console.log("おはよう、"+ val);
145
- };
146
-
147
- greetingTo("悟空"); // "おはよう、悟空"
148
- ```
149
-
150
- **コンストラクタ**
151
-
152
- ```js
153
- function AirMax(){
154
- this.brand = "Nike";
155
- this.shoesType = "Air Max";
156
- };
157
-
158
- let airMax1 = new AirMax();
159
-
160
- _( airMax1.brand ) //-> "Nike"
161
- ```
162
-
163
- そうなんです。❶どちらも関数なんです(`function`キーワードを用いて定義されてる)。
164
-
165
- そして、「通常の関数」なのか「コンストラクタ関数」なのかを分ける決定的な違いは、その**呼び出し方**にあるのです。
166
-
167
- 通常関数は、`関数名()`で呼び出すのに対して、❷コンストラクタ関数は、`new 関数名()`のように**`new`を前に付けて呼び出す**のです。
168
-
169
- `new`によって呼び出されたコンストラクタ関数は、上記コードや先の対比表で見たように、具現化された物体を返却します。
170
- さて、ここでもう一度コンストラクタ関数の定義を見てみましょう。
171
-
172
- > **定義**
173
- > ❶コンストラクタ関数とは、❷`new`操作記号によって呼び出された関数である。❸具現化された物体を返却する。
174
-
175
- 定義が正しい事は分かって頂けたでしょうか。定義では、関数内については一切触れていません。
176
-
177
- 結局ややこしいと感じるのは、どちらも`function`を使って定義されており、呼び出し方で定義されているからなのです。(定義の仕方はこれで合っています。どちらも関数であり、正確に定義するにはこのような抽象的な定義になってしまいます)
178
-
179
- 実際は、最初に表記方法を変えたり違いを対比したりしましたが、使う目的も呼び出し方も全く違うのです。
180
-
181
-
182
- # まとめ
183
- ややこしいので、「コンストラクタは`function`キーワードを使わないでを定義すればいいじゃん」と思うかもしれません。ですが、そこには多分深い理由があります。多分、あるはずです…????w
184
-
185
- 僕も、現在あまりコンピューター科学には詳しくない中級見習いな者で、理由は明確には分かっていません。ですが、JavaScriptが他のオブジェクト指向言語とは違い、継承方法をコンストラクタ+プロトタイプベースにし、classを使わなかった*(1)事と同じように、おそらく言語作成者の意図がそこにはあるのだと思います。
186
-
187
- *(1)ECMA2015でclassも使えるようになりました。

5

細かな修正

2019/06/05 03:04

投稿

退会済みユーザー
answer CHANGED
@@ -103,10 +103,10 @@
103
103
  this.shoesType = "Air Max";
104
104
  };
105
105
 
106
- new AirMax; // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
106
+ new AirMax(); // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
107
107
  ```
108
108
 
109
- こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方も全然違う事が分かるかと思います。
109
+ こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。
110
110
 
111
111
  通常関数とコンストラクタの使用目的・呼び出し方の違いは以下の通りです。
112
112
 

4

用語参照推奨 追記

2019/06/04 13:46

投稿

退会済みユーザー
answer CHANGED
@@ -80,7 +80,7 @@
80
80
  # 追記[19.06.04]
81
81
  > 普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。
82
82
 
83
- という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????
83
+ という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????(新たな独自用語がて出てきて分からない場合は、上の**用語**を参照下さい。追記しておきましたゆえ(｡•ㅅ•｡))
84
84
 
85
85
  # 通常の関数とコンストラクタ関数との違い
86
86
  どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。

3

通常の関数とコンストラクタ関数との違い 追記

2019/06/04 13:43

投稿

退会済みユーザー
answer CHANGED
@@ -71,4 +71,117 @@
71
71
  | 物体 | オブジェクト(object) |
72
72
  |具現化する | インスタンシエイト(instantiate) |
73
73
  |具現物 | インスタンス(instance) |
74
- |製造機 | コンストラクター(constructor) |
74
+ |製造機 | コンストラクター(constructor) |
75
+ | 性質 |プロパティ(property) |
76
+ | 術 | メソッド(method) |
77
+
78
+
79
+
80
+ # 追記[19.06.04]
81
+ > 普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。
82
+
83
+ という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????
84
+
85
+ # 通常の関数とコンストラクタ関数との違い
86
+ どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
87
+
88
+ ですので、分かりやすようコンストラクタ関数を`function`キーワードを用ず書き直してみました。
89
+
90
+ **通常関数**
91
+ ```js
92
+ function greetingTo( val ){
93
+ console.log("おはよう、"+ val);
94
+ };
95
+
96
+ greetingTo("悟空"); // "おはよう、悟空"
97
+ ```
98
+
99
+ **コンストラクタ**
100
+ ```js
101
+ CONSTRUCTOR AirMax(){
102
+ this.brand = "Nike";
103
+ this.shoesType = "Air Max";
104
+ };
105
+
106
+ new AirMax; // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
107
+ ```
108
+
109
+ こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方も全然違う事が分かるかと思います。
110
+
111
+ 通常関数とコンストラクタの使用目的・呼び出し方の違いは以下の通りです。
112
+
113
+ | | 通常関数 | コンストラクタ |
114
+ | ------- | ------- | -------- |
115
+ | ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
116
+ | ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
117
+ | ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
118
+ | ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術を継承 |
119
+
120
+ このように、全てにおいて違います。
121
+
122
+ **ややこしいと感じる理由は、元のコードがどちらも`function`キーワードを使って定義されているから**です。コンストラクタは`function`というキーワードこそ使いますが、全くの別物だと思っておいて結構です。
123
+
124
+ いいでしょうか。それでは書き方を元に戻しつつ、細かな違いやややこしさの詳細を見ていきましょう。
125
+
126
+ # ややこしい理由
127
+ ## どちらも`function`キーワードを使って定義する
128
+ これは上記の通りです。
129
+
130
+ ## コンストラクタ関数の定義が抽象的すぎる
131
+ > **定義**
132
+ > コンストラクタ関数とは、`new`操作記号によって呼び出された関数である。具現化された物体を返却する。
133
+
134
+ ??。定義は確かにこれで合っています。が、コンストラクタ関数を初めて学ぶ人には、おそらく意味が全く分かりません。
135
+
136
+ つまりこういう事です。
137
+
138
+ 先ほどの、通常関数とコンストラクタの違いの表をもう一度見た後に、以下を見てください。
139
+
140
+ **通常関数**
141
+
142
+ ```js
143
+ function greetingTo( val ){
144
+ console.log("おはよう、"+ val);
145
+ };
146
+
147
+ greetingTo("悟空"); // "おはよう、悟空"
148
+ ```
149
+
150
+ **コンストラクタ**
151
+
152
+ ```js
153
+ function AirMax(){
154
+ this.brand = "Nike";
155
+ this.shoesType = "Air Max";
156
+ };
157
+
158
+ let airMax1 = new AirMax();
159
+
160
+ _( airMax1.brand ) //-> "Nike"
161
+ ```
162
+
163
+ そうなんです。❶どちらも関数なんです(`function`キーワードを用いて定義されてる)。
164
+
165
+ そして、「通常の関数」なのか「コンストラクタ関数」なのかを分ける決定的な違いは、その**呼び出し方**にあるのです。
166
+
167
+ 通常関数は、`関数名()`で呼び出すのに対して、❷コンストラクタ関数は、`new 関数名()`のように**`new`を前に付けて呼び出す**のです。
168
+
169
+ `new`によって呼び出されたコンストラクタ関数は、上記コードや先の対比表で見たように、具現化された物体を返却します。
170
+ さて、ここでもう一度コンストラクタ関数の定義を見てみましょう。
171
+
172
+ > **定義**
173
+ > ❶コンストラクタ関数とは、❷`new`操作記号によって呼び出された関数である。❸具現化された物体を返却する。
174
+
175
+ 定義が正しい事は分かって頂けたでしょうか。定義では、関数内については一切触れていません。
176
+
177
+ 結局ややこしいと感じるのは、どちらも`function`を使って定義されており、呼び出し方で定義されているからなのです。(定義の仕方はこれで合っています。どちらも関数であり、正確に定義するにはこのような抽象的な定義になってしまいます)
178
+
179
+ 実際は、最初に表記方法を変えたり違いを対比したりしましたが、使う目的も呼び出し方も全く違うのです。
180
+
181
+
182
+ # まとめ
183
+ ややこしいので、「コンストラクタは`function`キーワードを使わないでを定義すればいいじゃん」と思うかもしれません。ですが、そこには多分深い理由があります。多分、あるはずです…????w
184
+
185
+ 僕も、現在あまりコンピューター科学には詳しくない中級見習いな者で、理由は明確には分かっていません。ですが、JavaScriptが他のオブジェクト指向言語とは違い、継承方法をコンストラクタ+プロトタイプベースにし、classを使わなかった*(1)事と同じように、おそらく言語作成者の意図がそこにはあるのだと思います。
186
+
187
+ *(1)ECMA2015でclassも使えるようになりました。

2

誤字修正

2019/06/04 13:39

投稿

退会済みユーザー
answer CHANGED
@@ -64,7 +64,7 @@
64
64
  上記の靴は、分かりやすい現実の例で例えました。既知かもですが、プログミングでは、物理的なものだけに限らず、あらゆるの物事を物体(オブジェクト)で表すことが出来ます。
65
65
 
66
66
  ## 用語
67
- (カタカナ用語は分かりにくいので、日本語にして説明ました)
67
+ (カタカナ用語は分かりにくいので、日本語にして説明しました)
68
68
 
69
69
  | 私訳 | 既存訳 |
70
70
  |--------------|--------------------------------|

1

誤字修正

2019/05/31 11:54

投稿

退会済みユーザー
answer CHANGED
@@ -10,7 +10,7 @@
10
10
  | 現実 | プログラミング |
11
11
  |-----------|-----------------------|
12
12
  | | |
13
- | 生産機 | コンストラクター関数 |
13
+ | 製造機 | コンストラクター関数 |
14
14
  | ↓ | ↓ |
15
15
  | [製造] | [具現化] |
16
16
  | ↓ | ↓ |
@@ -66,8 +66,9 @@
66
66
  ## 用語
67
67
  (カタカナ用語は分かりにくいので、日本語にして説明ました)
68
68
 
69
- | 私訳 | 既存訳 |
69
+ | 私訳 | 既存訳 |
70
- |----------|--------------------------------|
70
+ |--------------|--------------------------------|
71
- | 物体 | オブジェクト(object) |
71
+ | 物体 | オブジェクト(object) |
72
- |具現化する | インスタンシエイト(instantiate) |
72
+ |具現化する | インスタンシエイト(instantiate) |
73
- |具現物 | インスタンス(instance) |
73
+ |具現物 | インスタンス(instance) |
74
+ |製造機 | コンストラクター(constructor) |