JavaScript】コンストラクタの概念が分かりません

Question

学習し始めて2週間たち、
JavaScriptに出てくる言葉の概念を
一度整理したいのですが、
JavaScriptの[コンストラクタ]の概念が
ちゃんと理解できません。

普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。調べると、newするときに初期化するものをコンストラクタというと書いてありましたが、ピンときませんでした。

平易な言葉で説明していただけませんか。
よろしくおねがいいたします。

Answer 1

以下はJavaScriptだけの話です。

ES6の世界では覚えなくていいものだと思いますが、コンストラクタ自体はただの関数です。

function c(){
  this.p = 1;
}
c();

//undefiend

new演算子をつけて呼び出すことによって、新たなオブジェクトを返します。

function c(){
  this.p = 1;
}
new c();

/*
{p:1}
*/

この時、new演算子によって起こっていることは、以下のとおりです。

1. 新たなオブジェクトを作成しthisに入れる。
2. c()を実行する。
3. return文があれば戻り値を返し、なければthisを返す。

（簡単のため[[prototype]]などについては省略）

以上、ひとことでまとめると、「new演算子をつけて呼び出すことを意図して書かれた関数をコンストラクタと呼ぶ」という理解でいいかと思います。

Comments

[ayaChi]

まとめがすごく分かりやすかったです。概念を理解することができました。貴重なお時間とって教えていただき、ありがとうございます！

Answer 2

コンストラクター関数

コンストラクターとは、正確にはコンストラクター関数であり、現実で例えると、工場の製造機のようなものです。

例えば、ナイキの靴の製造機を想像して下さい。エアーマックスという種類の靴を製造してくれる機械があったとします。その製造機はいくつも同じエアーマックスを製造してくれます。

この製造機・製造物(靴:エアーマックス)のモデルを、コードで表したのがコンストラクター関数です。
製造機の例とコードを対比したものが以下です。

現実	プログラミング
製造機	コンストラクター関数
↓	↓
[製造]	[具現化]
↓	↓
靴	物体(オブジェクト)

"use strict";

/* console.logと毎回書くのは面倒&見づらいゆえ、`_`(アンダースコア)に割り当て */
let _ = console.log;

function AirMax(){
   this.brand = "Nike";
   this.shoesType = "Air Max";
};

let airMax1 = new AirMax(),
airMax2 = new AirMax();

_( airMax1.brand ); //-> "Nike"
_( airMax1.shoesType ); //-> "Air Max"

_( airMax2.brand ); //-> "Nike"
_( airMax2.shoesType ); //-> "Air Max"

コンストラクター関数は、その前にnewキーワードを書くと、物体を作成し返却します。上記コードでは、新たに作成された物体をairMax1, airMax2に割り当て、後で参照出来るようにしています。

new + コンストラクター関数 によって物体を作成する事を、プログミングでは具現化すると言い、作成された物体airMax1/airMax2を具現物と言います。

新しく具現化され返却された物体は、コンストラクター関数内で定義された性質・術が初期値化されています。

少しだけ違うものを具現化する

先の例では、具現物が全く同じものばかりになってしまいます。

そこで、少し違うものを作りたい場合、例えば先の靴の例で言えば「靴に買った人の名前を入れる」事にします。そういう場合は、具現化時に、コンストラクター関数に引数として名前を渡せるように、コンストラクター関数を少し変更します。

function AirMax(name){
   this.brand = "Nike";
   this.shoesType = "Air Max";
   
   /* 追加 */
   this.owner = name;
};

let airMax1 = new AirMax("Taro"),
airMax2 = new AirMax("Hana");

_( airMax1.owner ); //-> "Taro"
_( airMax2.owner ); //-> "Hana"

まとめ

上記の靴は、分かりやすい現実の例で例えました。既知かもですが、プログミングでは、物理的なものだけに限らず、あらゆるの物事を物体(オブジェクト)で表すことが出来ます。

用語

(カタカナ用語は分かりにくいので、日本語にして説明しました)

私訳	既存訳
組み立て係	コンストラクター(constructor)
物体	オブジェクト(object)
具現化する	インスタンシエイト(instantiate)
具現物	インスタンス(instance)
初期値化する	初期化する(initialize)
性質	プロパティ(property)
術	メソッド(method)

追記[19.06.04]

普通の関数と、コンストラクタ関数の違いはなんなのでしょうか。

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

上記の回答部分に一文追記しました。重要部分&追記明瞭化のため、一文が太字になっています。

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

通常関数とコンストラクタの違いを、表にして比較してみました。

	通常関数	コンストラクタ
❶目的	繰り返し行う作業をまとめ、作業の効率化。複数回記入→誤記入→エラー の削減のため	同じような性質・術を備えた、複数の物体を作成するため
❷{}内の定義の仕方	様々な処理を定義する	this.性質名 = 値 or this.術名 = function(){}
❸呼び出し	識別子名 + ()	new + 識別子名
❹返却値	returnの有無による	新しく作成された物体。コンストラクタで定義された性質・術が初期値化されている

どちらも関数ですが、全くの別物と考えると分かりやすかと思います。元々、通常の関数(以下、通常関数)とコンストラクタ関数は、使用目的も呼び出し方も全く異なります。

僕も最初はそうでしたが、ややこしい・わかった様な分からない様な…と感じる理由は

• どちらもfunctionを使って定義されいる(関数である)
• 定義が抽象的

だからが大きい気がします。ですので、以下に分かりやすよう、コンストラクタ関数をfunctionキーワードを用ず書き直してみました。

通常関数

function greetingTo( val ){
   console.log("おはよう、"+  val);
};

greetingTo("悟空"); // "おはよう、悟空"

コンストラクタ関数

CONSTRUCTOR AirMax(){
   this.brand = "Nike";
   this.shoesType = "Air Max";
};

new AirMax();  // 比較が分かりやすいよう、返却された具現物の割り当てはしていません

こうすると、通常関数とコンストラクタでは、{}内の定義の仕方・呼び出し方の違いがより分かりやすいかと思います。

Comments

[ayaChi]

分かりやすい現実のことで例えてくださって助かりました！とても理解しやすかったです。コンストラクタは製造機なんですね。 同じ靴を複製していって、違うデータ(所有者の名前)を入れたくなったら、引数で値を渡せばいいんですね。で、newするときに、新しく生成されるインスタンスに所有者の名前を渡してあげることで、微妙に違う靴の大量生産ができるということなんですかね！

貴重なお時間をとって教えて下さってありがとうございます！

[退会済みユーザー]

そうですそうです( ´ω`)/✨♪♪ 分かりやすいようで良かったです( ´ω`)/✨♪♪ こちらも凄く勉強になりました*.(๓´͈ ˘ `͈๓).*????

コンストラクター関数の様に、「設計図」的な手法で物体(オブジェクト)を作る方法は、他に
❷"クラス(部類)"
を使うやり方もあります。

また、JavaScripの場合は、物体を具現化によって、または、字母**`{}`によって作成した後に、他の物体の性質**や術**を"継承**"する事ができたりします(原型**) ).(๓´͈ ˘ `͈๓).*????

**語彙**
字母: リテラル(literal)
性質 :プロパティ(property)
術: メソッド(method)
継承: __(inheritance)
原型: プロトタイプ(prototype)

Answer 3

オブジェクト指向言語には大体ある概念ですので下記のような記事をまず読んでみましょう。

• コンストラクタ (constructor)とは｜「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

冒頭から引用

・メソッド（関数）だよ

・クラスをnewしたときに実行されるよ
・オブジェクト指向なプログラミング言語で出てくるよ

「クラスをnewしたときに自動で実行されるメソッド」というのが簡単な説明ですね。

下記の記事にあるサンプルコードが分かりやすいと思います。

• コンストラクタ｜JavaScript入門

記事から引用

function Person(n) { // Constructor
	this.name = n;
	return this; // opt.
}

var p1 = new Person('Hanako');
document.write(p1.name);

自動で「Hanako」というnameを持ったPersonオブジェクトができあがるわけです。
ということで、newのときに別の引数を渡してあげると、いろんな人の情報を持つそれぞれのPersonオブジェクトができあがります。

function Person(n) { // Constructor
	this.name = n;
	return this; // opt.
}

let PHanako = new Person('Hanako');
let PTaro = new Person('Taro');
let PAi = new Person('Ai');
let PKenji = new Person('Kenji');

console.log(PHanako.name);
console.log(PTaro.name);
console.log(PAi.name);
console.log(PKenji.name);

Comments

[ayaChi]

コンストラクタ関数の概念と書き方、参考になりました、貴重なお時間とって教えてくださり、ありがとうございます！

[m.ts10806]

参考になったようで何よりです

Answer 4

学習し始めて2週間たち、
JavaScriptに出てくる言葉の概念を

この状況でしたら「コンストラクタ」の理解はスキップした方がよいかも。

オブジェクト指向にはクラスペースとプロトタイプベースがありまして、
JavaScript は後者に分類されます。
また、前者の特徴としてクラスを定義するってのがありまして、
その中でコンストラクタも定義するのでわかりやすいと思います。

世の中の(有名なオブジェクト指向)プログラミング言語では
前者が多いので Java なり Python なりを勉強しはじめてから
コンストラクタを理解するのがいいんじゃないかなあ、と。