JavaScriptのコンストラクタによるインスタンス生成

JavaScriptはオブジェクト指向言語ですが、JavaやC++のようなクラスベースではなく、プロトタイプベースのオブジェクト指向です(注1)。

ここでは、JavaScriptにおけるインスタンスの生成方法について説明します。なお、ここではnew演算子とコンストラクタを使って新たに生成するオブジェクトを特にインスタンスと呼ぶことにします。

(注1)ECMA6からはクラス構文が導入されていますが、現状では必ずしも全てのブラウザが対応しているわけではないようです。

JavaScriptにおけるオブジェクト

JavaやC++といったクラスベースのオブジェクト指向言語では、クラスを元にインスタンスを生成します。

しかし、JavaScriptには基本的にはクラスという概念はなく、オブジェクトの作成には以下の2通りがあります。

  • オブジェクト初期化子を用いる
  • コンストラクタからインスタンスを作成する

空のオブジェクトを作成する

以下は、実際に2通りの方法で空のオブジェクトを作る例です。

オブジェクト初期化子

コンストラクタ

次より、コンストラクタに関してより詳しく説明していきます。

コンストラクタとは

JavaScriptでは、関数もオブジェクトであり「関数オブジェクト」と呼びます。そして、コンストラクタは、オブジェクトの定義をするための関数で、コンストラクタ関数とも呼びます。

コンストラクタ = 関数オブジェクト

つまり、コンストラクタとは、関数オブジェクトのことを指します。なので、全ての関数はコンストラクタになることができます。実際には、インスタンス生成のための関数をコンストラクタと呼びます。

new演算子によるインスタンス生成

インスタンスの生成には、new演算子とコンストラクタを使います。

コンストラクタでは、thisキーワードを使いオブジェクトの定義します。また通常、コンストラクタにはreturn文はありません。

new演算子で呼び出された時の働き

new演算子を使って呼び出されると、コンストラクタ内の処理を実行した上で次のような特別な働きをします。

・コンストラクタ内のthisキーワードに生成されるインスタンスを設定する
・undefinedの代わりに新たに生成するインスタンスを返す

コンストラクタを使ったオブジェクト作成の例

次の例では中身を持たないコンストラクタを定義し、最も単純な空のインスタンスを生成しています。

これでPersonというオブジェクトからper1インスタンスを生成することができました。

通常、コンストラクタはインスタンスの初期化を行います。具体的には、生成するインスタンスで共有するプロパティ(変数やメソッド)をコンストラクタで定義します。

プロパティを初期化

次の例は、先程のPersonコンストラクタでname、age、singというプロパティを初期化しています。この時、thisは新たに生成されるインスタンス自身を表わします。

生成したインスタンスのプロパティを利用するには、「インスタンス名.プロパティ名」あるいは「インスタンス名['プロパティ名']のように書きます。

生成したインスタンスにプロパティを追加する

コンストラクタから生成したインスタンス自体にプロパティを追加することもできます。その場合、追加したプロパティはそのインスタンス以外から参照することはできないことに注意して下さい。

ここでは、per1インスタンスにsingプロパティを追加し、per1.sing()のようにメソッドとして呼び出しています。per2インスタンスには影響しません。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて