トップ JavaScriptに関する質問 JavaScript】コンストラクタの概念が分かりません

編集履歴

回答編集履歴

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

2019/06/06 02:40

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -38,13 +38,23 @@
 ```js
+"use strict";
+/* console.logと毎回書くのは面倒&見づらいゆえ、`_`(アンダースコア)に割り当て */
+let _ = console.log;
 function AirMax(){
    this.brand = "Nike";
    this.shoesType = "Air Max";
-}
+};
@@ -54,15 +64,15 @@
-_( airMax1.brand ) //-> "Nike"
+_( airMax1.brand ); //-> "Nike"
-_( airMax1.shoesType ) //-> "Air Max"
+_( airMax1.shoesType ); //-> "Air Max"
-_( airMax2.brand ) //-> "Nike"
+_( airMax2.brand ); //-> "Nike"
-_( airMax2.shoesType ) //-> "Air Max"
+_( airMax2.shoesType ); //-> "Air Max"
 ```
@@ -118,9 +128,9 @@
-_( airMax1.owner ) //-> "Taro"
+_( airMax1.owner ); //-> "Taro"
-_( airMax2.owner ) //-> "Hana"
+_( airMax2.owner ); //-> "Hana"

追記正完了

2019/06/06 02:40

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -1,4 +1,4 @@
-## コンストラクター関数
+# コンストラクター関数
 コンストラクターとは、正確にはコンストラクター関数であり、現実で例えると、工場の製造機のようなものです。
@@ -78,9 +78,13 @@
+**新しく具現化され返却された物体は、コンストラクター関数内で定義された性質・術が初期値化されています。**
-## 少しだけ違うものを具現化する
+# 少しだけ違うものを具現化する
 先の例では、具現物が全く同じものばかりになってしまいます。
@@ -88,6 +92,8 @@
 そこで、少し違うものを作りたい場合、例えば先の靴の例で言えば「靴に買った人の名前を入れる」事にします。そういう場合は、具現化時に、コンストラクター関数に引数として名前を渡せるように、コンストラクター関数を少し変更します。
 ```js
 function AirMax(name){
@@ -122,29 +128,31 @@
-## まとめ
+# まとめ
 上記の靴は、分かりやすい現実の例で例えました。既知かもですが、プログミングでは、物理的なものだけに限らず、あらゆるの物事を物体(オブジェクト)で表すことが出来ます。
-## 用語
+# 用語
 (カタカナ用語は分かりにくいので、日本語にして説明しました)
-|  私訳         | 既存訳                          |
+| 私訳 | 既存訳 |
 |--------------|--------------------------------|
+| 組み立て係 | コンストラクター(constructor) |
-|  物体         | オブジェクト(object)             |
+| 物体 | オブジェクト(object) |
-|具現化する      | インスタンシエイト(instantiate)   |
+| 具現化する | インスタンシエイト(instantiate) |
-|具現物         | インスタンス(instance)           |
+| 具現物 | インスタンス(instance) |
-|製造機         | コンストラクター(constructor)     |
+| 初期値化する | 初期化する(initialize) |
 | 性質 |プロパティ(property) |
@@ -166,4 +174,92 @@
+**上記の回答部分に一文追記しました。重要部分&追記明瞭化のため、一文が太字になっています。**
+# 通常の関数とコンストラクタ関数との違い
+通常関数とコンストラクタの違いを、表にして比較してみました。
+|         | 通常関数 | コンストラクタ |
+| ------- | ------- | -------- |
+| ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
+| ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
+| ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
+| ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術が初期値化されている |
-**(追記したのですが、一部誤りが発覚したため、一時取り下げしました???????? 訂正後、再アップしますので、少々お待ち下さい(｡•ㅅ•｡)????)**
+どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
+僕も最初はそうでしたが、ややこしい・わかった様な分からない様な…と感じる理由は
+- どちらも`function`を使って定義されいる(関数である)
+- 定義が抽象的
+だからが大きい気がします。ですので、以下に分かりやすよう、コンストラクタ関数を`function`キーワードを用ず書き直してみました。
+**通常関数**
+```js
+function greetingTo( val ){
+   console.log("おはよう、"+  val);
+};
+greetingTo("悟空"); // "おはよう、悟空"
+```
+**コンストラクタ関数**
+```js
+CONSTRUCTOR AirMax(){
+   this.brand = "Nike";
+   this.shoesType = "Air Max";
+};
+new AirMax();  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
+```
+こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。

追記部一時取り下げ

2019/06/05 06:38

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -166,208 +166,4 @@
-# 通常の関数とコンストラクタ関数との違い
-どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
+**(追記したのですが、一部誤りが発覚したため、一時取り下げしました???????? 訂正後、再アップしますので、少々お待ち下さい(｡•ㅅ•｡)????)**
-ですので、分かりやすようコンストラクタ関数を`function`キーワードを用ず書き直してみました。
-**通常関数**
-```js
-function greetingTo( val ){
-   console.log("おはよう、"+  val);
-};
-greetingTo("悟空"); // "おはよう、悟空"
-```
-**コンストラクタ**
-```js
-CONSTRUCTOR AirMax(){
-   this.brand = "Nike";
-   this.shoesType = "Air Max";
-};
-new AirMax();  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
-```
-こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。
-通常関数とコンストラクタの使用目的・呼び出し方の違いは以下の通りです。
-|         | 通常関数 | コンストラクタ |
-| ------- | ------- | -------- |
-| ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
-| ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
-| ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
-| ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術を継承 |
-このように、全てにおいて違います。
-**ややこしいと感じる理由は、元のコードがどちらも`function`キーワードを使って定義されているから**です。コンストラクタは`function`というキーワードこそ使いますが、全くの別物だと思っておいて結構です。
-いいでしょうか。それでは書き方を元に戻しつつ、細かな違いやややこしさの詳細を見ていきましょう。
-# ややこしい理由
-## どちらも`function`キーワードを使って定義する
-これは上記の通りです。
-## コンストラクタ関数の定義が抽象的すぎる
-> **定義**
-> コンストラクタ関数とは、`new`操作記号によって呼び出された関数である。具現化された物体を返却する。
-??。定義は確かにこれで合っています。が、コンストラクタ関数を初めて学ぶ人には、おそらく意味が全く分かりません。
-つまりこういう事です。
-先ほどの、通常関数とコンストラクタの違いの表をもう一度見た後に、以下を見てください。
-**通常関数**
-```js
-function greetingTo( val ){
-   console.log("おはよう、"+  val);
-};
-greetingTo("悟空"); // "おはよう、悟空"
-```
-**コンストラクタ**
-```js
-function AirMax(){
-   this.brand = "Nike";
-   this.shoesType = "Air Max";
-};
-let airMax1 = new AirMax();
-_( airMax1.brand ) //-> "Nike"
-```
-そうなんです。❶どちらも関数なんです(`function`キーワードを用いて定義されてる)。
-そして、「通常の関数」なのか「コンストラクタ関数」なのかを分ける決定的な違いは、その**呼び出し方**にあるのです。
-通常関数は、`関数名()`で呼び出すのに対して、❷コンストラクタ関数は、`new 関数名()`のように**`new`を前に付けて呼び出す**のです。
-`new`によって呼び出されたコンストラクタ関数は、上記コードや先の対比表で見たように、具現化された物体を返却します。
-さて、ここでもう一度コンストラクタ関数の定義を見てみましょう。
-> **定義**
-> ❶コンストラクタ関数とは、❷`new`操作記号によって呼び出された関数である。❸具現化された物体を返却する。
-定義が正しい事は分かって頂けたでしょうか。定義では、関数内については一切触れていません。
-結局ややこしいと感じるのは、どちらも`function`を使って定義されており、呼び出し方で定義されているからなのです。(定義の仕方はこれで合っています。どちらも関数であり、正確に定義するにはこのような抽象的な定義になってしまいます)
-実際は、最初に表記方法を変えたり違いを対比したりしましたが、使う目的も呼び出し方も全く違うのです。
-# まとめ
-ややこしいので、「コンストラクタは`function`キーワードを使わないでを定義すればいいじゃん」と思うかもしれません。ですが、そこには多分深い理由があります。多分、あるはずです…????w
-僕も、現在あまりコンピューター科学には詳しくない中級見習いな者で、理由は明確には分かっていません。ですが、JavaScriptが他のオブジェクト指向言語とは違い、継承方法をコンストラクタ+プロトタイプベースにし、classを使わなかった*(1)事と同じように、おそらく言語作成者の意図がそこにはあるのだと思います。
-*(1)ECMA2015でclassも使えるようになりました。

細かな修正

2019/06/05 03:04

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -208,13 +208,13 @@
-new AirMax;  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
+new AirMax();  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
-```
+```
-こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方も全然違う事が分かるかと思います。
+こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。

用語参照推奨追記

2019/06/04 13:46

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -162,7 +162,7 @@
-という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????
+という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????(新たな独自用語がて出てきて分からない場合は、上の**用語**を参照下さい。追記しておきましたゆえ(｡•ㅅ•｡))

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

2019/06/04 13:43

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -145,3 +145,229 @@
 |具現物         | インスタンス(instance)           |
 |製造機         | コンストラクター(constructor)     |
+| 性質 |プロパティ(property) |
+| 術 | メソッド(method) |
+# 追記[19.06.04]
+> 普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。
+という部分に答えていなかった事に気付き????、 以下まとめてみました。もし参考になれば幸いです????
+# 通常の関数とコンストラクタ関数との違い
+どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。
+ですので、分かりやすようコンストラクタ関数を`function`キーワードを用ず書き直してみました。
+**通常関数**
+```js
+function greetingTo( val ){
+   console.log("おはよう、"+  val);
+};
+greetingTo("悟空"); // "おはよう、悟空"
+```
+**コンストラクタ**
+```js
+CONSTRUCTOR AirMax(){
+   this.brand = "Nike";
+   this.shoesType = "Air Max";
+};
+new AirMax;  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません
+```
+こうすると、通常関数とコンストラクタでは、`{}`内の定義の仕方・呼び出し方も全然違う事が分かるかと思います。
+通常関数とコンストラクタの使用目的・呼び出し方の違いは以下の通りです。
+|         | 通常関数 | コンストラクタ |
+| ------- | ------- | -------- |
+| ❶目的 | 繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため | 同じような性質・術を備えた、複数の物体を作成するため |
+| ❷`{}`内の定義の仕方 | 様々な処理を定義する | `this.性質名 = 値` or `this.術名 = function(){}` |
+| ❸呼び出し | 識別子名 + `()` | `new` + 識別子名 |
+| ❹返却値 | returnの有無による | 新しく作成された物体。コンストラクタで定義された性質・術を継承 |
+このように、全てにおいて違います。
+**ややこしいと感じる理由は、元のコードがどちらも`function`キーワードを使って定義されているから**です。コンストラクタは`function`というキーワードこそ使いますが、全くの別物だと思っておいて結構です。
+いいでしょうか。それでは書き方を元に戻しつつ、細かな違いやややこしさの詳細を見ていきましょう。
+# ややこしい理由
+## どちらも`function`キーワードを使って定義する
+これは上記の通りです。
+## コンストラクタ関数の定義が抽象的すぎる
+> **定義**
+> コンストラクタ関数とは、`new`操作記号によって呼び出された関数である。具現化された物体を返却する。
+??。定義は確かにこれで合っています。が、コンストラクタ関数を初めて学ぶ人には、おそらく意味が全く分かりません。
+つまりこういう事です。
+先ほどの、通常関数とコンストラクタの違いの表をもう一度見た後に、以下を見てください。
+**通常関数**
+```js
+function greetingTo( val ){
+   console.log("おはよう、"+  val);
+};
+greetingTo("悟空"); // "おはよう、悟空"
+```
+**コンストラクタ**
+```js
+function AirMax(){
+   this.brand = "Nike";
+   this.shoesType = "Air Max";
+};
+let airMax1 = new AirMax();
+_( airMax1.brand ) //-> "Nike"
+```
+そうなんです。❶どちらも関数なんです(`function`キーワードを用いて定義されてる)。
+そして、「通常の関数」なのか「コンストラクタ関数」なのかを分ける決定的な違いは、その**呼び出し方**にあるのです。
+通常関数は、`関数名()`で呼び出すのに対して、❷コンストラクタ関数は、`new 関数名()`のように**`new`を前に付けて呼び出す**のです。
+`new`によって呼び出されたコンストラクタ関数は、上記コードや先の対比表で見たように、具現化された物体を返却します。
+さて、ここでもう一度コンストラクタ関数の定義を見てみましょう。
+> **定義**
+> ❶コンストラクタ関数とは、❷`new`操作記号によって呼び出された関数である。❸具現化された物体を返却する。
+定義が正しい事は分かって頂けたでしょうか。定義では、関数内については一切触れていません。
+結局ややこしいと感じるのは、どちらも`function`を使って定義されており、呼び出し方で定義されているからなのです。(定義の仕方はこれで合っています。どちらも関数であり、正確に定義するにはこのような抽象的な定義になってしまいます)
+実際は、最初に表記方法を変えたり違いを対比したりしましたが、使う目的も呼び出し方も全く違うのです。
+# まとめ
+ややこしいので、「コンストラクタは`function`キーワードを使わないでを定義すればいいじゃん」と思うかもしれません。ですが、そこには多分深い理由があります。多分、あるはずです…????w
+僕も、現在あまりコンピューター科学には詳しくない中級見習いな者で、理由は明確には分かっていません。ですが、JavaScriptが他のオブジェクト指向言語とは違い、継承方法をコンストラクタ+プロトタイプベースにし、classを使わなかった*(1)事と同じように、おそらく言語作成者の意図がそこにはあるのだと思います。
+*(1)ECMA2015でclassも使えるようになりました。

誤字修正

2019/06/04 13:39

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -130,7 +130,7 @@
 ## 用語
-(カタカナ用語は分かりにくいので、日本語にして説明ました)
+(カタカナ用語は分かりにくいので、日本語にして説明しました)

誤字修正

2019/05/31 11:54

投稿

退会済みユーザー

スコア0

test CHANGED Viewed

@@ -22,7 +22,7 @@
 |           |                       |
-|  生産機   |  コンストラクター関数 |
+|  製造機   |  コンストラクター関数 |
 |    ↓      |       ↓               |
@@ -134,12 +134,14 @@
-|  私訳     | 既存訳                          |
+|  私訳         | 既存訳                          |
-|----------|--------------------------------|
+|--------------|--------------------------------|
-|  物体     | オブジェクト(object)             |
+|  物体         | オブジェクト(object)             |
-|具現化する  | インスタンシエイト(instantiate)   |
+|具現化する      | インスタンシエイト(instantiate)   |
-|具現物     | インスタンス(instance)           |
+|具現物         | インスタンス(instance)           |
+|製造機         | コンストラクター(constructor)     |