駆け出しのエンジニア日記

プログラミング言語勉強中の奮闘日記

コンストラクタ関数

コンストラクタ関数・・・

新しくオブジェクトを作成するための雛形となる関数です。

記述するには専用のnew演算子を使います。

そもそも「new演算子」とは、、、
・空のプレーンな JavaScript オブジェクトを生成
・新しいオブジェクトにプロパティ(__proto__) を追加し、コンストラクター関数のプロトタイプオブジェクトに結びつる
コンストラクター関数のプロトタイプに追加されたプロトタイプやオブジェクトは、そのためそのコンストラクター関数で(new を使用して)生成されたすべてのインスタンスからアクセスできます。
・新しく生成されたオブジェクトインスタンスを this コンテキストとして結びつける (すなわち、コンストラクター関数内の this へのすべての参照は、最初のステップで作成されたオブジェクトを参照するようになる。)
・関数がオブジェクトを返さない場合は this を返す。つまりreturnが無い場合は this を返す。
というものです。

そして、new演算子をつけて呼ばれた関数は、オブジェクトを生成します。

このnew演算子を使ってコンストラクター関数からオブジェクトを生成することをイン

スタンス化といい、生成されたオブジェクトをインスタンスといいます。

※ちなみにコンストラクタ関数はアロー関数は使用できません

実際にサンプルを書いてみます。

function Color(r, g, b) {
this.r = r;
this.g = g;
this.b = b;
}
 

上記のように記述することでオブジェクトが返ってきます。「r,g,b」のプロパティも設定されています。

 

・メソッドの定義の仕方

//prototypeでメソッドを追加
Color.prototype.rgb = function () {
const { r, g, b } = this;
return `rgb(${r},${g},${b})`
}
 
const color1 = new Color(255, 100, 80);

(__proto__)の中に「rgb」というメソッドが追加され、「rgb」があたかも自分のメソッドのように呼び出すことが可能です。

 

ファクトリ関数との大きな相違点は、毎回定義した同じ関数が作成される点です。

関数は定義さえすれば流用できますが、ファクトリ関数は中身が同じ関数を

function1、function2が新たに作られてしまいます。

コンストラクタ関数は上記の点より、プロトタイプにメソッドを定義するだけで一つのメソッドを使い回すことができるため、コンストラクタ関数の方が使用頻度が高いです。

 

コンストラクタ関数について簡潔にまとめてみました。

MDNも参考にしてみてください。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/Function