• JavaScript

【JavaScript】コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法

コンストラクター関数（オブジェクトの雛形を作成する関数）の使い方を知りたい。

また、作成した雛形を使ってオブジェクトをインスタンス化（オブジェクトを生成）したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

コンストラクター関数の実装例

// コンストラクター関数
function Test(name,num) {
  this.name = name;
  this.num = num;
}

// インスタンス化
const sato = new Test('sato','80');
const suzuki = new Test('suzuki','70');

// コンソール出力結果
console.log(sato);
console.log(suzuki);
// Test {name: 'sato', num: '80'}
// Test {name: 'suzuki', num: '70'}

コンストラクター関数を使った実装例です。

Testというコンストラクター関数を定義。

上記雛形を使い、sato、suzukiというオブジェクトを生成してます。

詳細は以下の通りです。

コンストラクター関数を定義

// コンストラクター関数
function Test(name,num) {
  this.name = name;
  this.num = num;
}

まず最初にコンストラクター関数を定義します。

functionの後に任意の関数名を記述。

オブジェクト化します。

以上でコンストラクター関数が作成されます。

本記事では例としてname、numというプロパティが入るオブジェクトの雛形を作成してます。

オブジェクトを生成（インスタンス化）

// インスタンス化
const sato = new Test('sato','80');
const suzuki = new Test('suzuki','70');

コンストラクター関数を使ってオブジェクトを生成するコード例です。

コンストラクター関数からオブジェクトを生成する事をインスタンス化と言います。

インスタンス化にはnew演算子を使います。

コンストラクター関数名の前にnewを記述することでインスタンス化できます。

生成されたオブジェクトを確認

// コンソール出力結果
console.log(sato);
console.log(suzuki);
// Test {name: 'sato', num: '80'}
// Test {name: 'suzuki', num: '70'}

最後にインスタンス化されたオブジェクトをコンソールで確認。

オブジェクト化されていたら成功です。

インスタンス化されたオブジェクトの事をインスタンスもしくはインスタンスオブジェクトと言います。

まとめ

コンストラクター関数を使ってオブジェクトの雛形を作成・インスタンス化する方法について紹介しました。

以上で解説を終わります。