JavaScriptのオブジェクトの生成としてFunctionコンストラクターとプロトタイプチェーンを見てきました。
オブジェクトを作成する方法は様々な方法があります。
ここではプロトタイプから継承するオブジェクトを作成する別の方法を見ていくことにします。
Object.create()
Functionコンストラクターによるオブジェクトの生成を扱いましたが、オブジェクトと継承を生成する方法は他にもあります。
まずプロトタイプを単純なオブジェクトとして記述して行きます。他のところと同じようにスクリプトファイル（ここではscript.js）に次のコードを記述します。事例はこれまでと同様のものにしています。
var personProto = {
calculateAge: function() {
console.log(2019 - this.birthYear);
}
};ここではFunctionコンストラクターではないので、personProtoと小文字ではじめています。以前の事例と同様の計算を記述していますが、中身の記述方法が違うことを確認できると思います。Functionコンストラクターでやった記述と比較するといいでしょう。
これに続けて、オブジェクトを作ります。
var edward = Object.create(personProto);宣言したオブジェクトにObject.create()に上で定義したプロトタイプオブジェクトを渡しています。
コードをブラウザで実行して、JavaScriptコンソールにedwardと入力すると次のように表示されます。
オブジェクトの中身はまだ空でありプロトタイプの関数の定義が引き継がれているだけです。
このオブジェクトにデータを与えていくには、続けて次のようなコードをスクリプトファイルに記述していきます。（これまでのコードと合わせて書きます）
var personProto = {
calculateAge: function() {
console.log(2019 - this.birthYear);
}
};
var edward = Object.create(personProto);
edward.name = 'エドワード';
edward.birthYear = 2000;
edward.job = '国家錬金術師';オブジェクト（ここではedward）にドット（.）で接続してそれぞれのデータを渡しているのがわかります。
これを実行してJavaScriptコンソールで同様に見てみましょう。
これはFunctionコンストラクターでやったのと同じような表示になっているのがわかります。
ただ、このように空のオブジェクトを作って、その下にデータを記述して渡していくのはまとまりの悪い書き方でもあります。
今度はこれとは別の方法で一つのオブジェクトとして記述するようにしてみます。
var alphonse = Object.create(personProto, {
name: { value: 'アルフォンス' },
birthYear: { value: 2004 },
hobby: { value: '鎧と錬金術' }
});上との違いがわかるでしょうか。
ここではオブジェクトを宣言して、Object.create()に上で定義したプロトタイプオブジェクトを渡すだけでなく、第２引数を渡しています。この第２引数に、オブジェクトして持ちたいデータを指定して、それにvalueとしてデータを対応させて渡しています。
ブラウザをリロードしてみます。
先ほどのコードに続けてコードを書いていますので、edwardとalphonseをそれぞれ表示しています。
どちらも同じ構造で表示されているのがわかります。同じプロトタイプを持ち、同じ計算式を共有しています。そしてそれぞれ個別のデータを保有しているのがわかります。
まとめ
ここではJavaScriptのプロトタイプから継承するオブジェクトを作成する方法を見てきました。
Functionコンストラクターでの方法よりも、Object.create()を使った方が簡単に継承できて、どのオブジェクトをプロトタイプにするかを直接指定することができます。
Functionコンストラクターでの方法とここでの方法を見比べてみるといいでしょう。
