【JavaScript】オブジェクトの生成 – Object.create()

JavaScript
スポンサーリンク

JavaScriptのオブジェクトの生成としてFunctionコンストラクターとプロトタイプチェーンを見てきました。

【JavaScript】オブジェクトの生成とFunctionコンストラクター
JavaScriptにおけるオブジェクトの生成とFunctionコンストラクターをみていきます。オブジェクトの継承によって、コンストラクタのprototypeプロパティの参照がされていることをFunctionコンストラクターから確認します。

オブジェクトを作成する方法は様々な方法があります。

ここではプロトタイプから継承するオブジェクトを作成する別の方法を見ていくことにします。

スポンサーリンク

Object.create()

Functionコンストラクターによるオブジェクトの生成を扱いましたが、オブジェクトと継承を生成する方法は他にもあります。

まずプロトタイプを単純なオブジェクトとして記述して行きます。他のところと同じようにスクリプトファイル(ここではscript.js)に次のコードを記述します。事例はこれまでと同様のものにしています。

ここではFunctionコンストラクターではないので、personProtoと小文字ではじめています。以前の事例と同様の計算を記述していますが、中身の記述方法が違うことを確認できると思います。Functionコンストラクターでやった記述と比較するといいでしょう。

これに続けて、オブジェクトを作ります。

宣言したオブジェクトにObject.create()に上で定義したプロトタイプオブジェクトを渡しています。

コードをブラウザで実行して、JavaScriptコンソールにedwardと入力すると次のように表示されます。

オブジェクトの中身はまだ空でありプロトタイプの関数の定義が引き継がれているだけです。

このオブジェクトにデータを与えていくには、続けて次のようなコードをスクリプトファイルに記述していきます。(これまでのコードと合わせて書きます)

オブジェクト(ここではedward)にドット(.)で接続してそれぞれのデータを渡しているのがわかります。

これを実行してJavaScriptコンソールで同様に見てみましょう。

これはFunctionコンストラクターでやったのと同じような表示になっているのがわかります。

ただ、このように空のオブジェクトを作って、その下にデータを記述して渡していくのはまとまりの悪い書き方でもあります。

今度はこれとは別の方法で一つのオブジェクトとして記述するようにしてみます。

上との違いがわかるでしょうか。

ここではオブジェクトを宣言して、Object.create()に上で定義したプロトタイプオブジェクトを渡すだけでなく、第2引数を渡しています。この第2引数に、オブジェクトして持ちたいデータを指定して、それにvalueとしてデータを対応させて渡しています。

ブラウザをリロードしてみます。

先ほどのコードに続けてコードを書いていますので、edwardとalphonseをそれぞれ表示しています。

どちらも同じ構造で表示されているのがわかります。同じプロトタイプを持ち、同じ計算式を共有しています。そしてそれぞれ個別のデータを保有しているのがわかります。

スポンサーリンク

まとめ

ここではJavaScriptのプロトタイプから継承するオブジェクトを作成する方法を見てきました。

Functionコンストラクターでの方法よりも、Object.create()を使った方が簡単に継承できて、どのオブジェクトをプロトタイプにするかを直接指定することができます。

Functionコンストラクターでの方法とここでの方法を見比べてみるといいでしょう。

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

コードグラフィティ:とにかく進め!独学プログラミング – Python入門から始めてどこまで学べる?
タイトルとURLをコピーしました