【JavaScript】オブジェクトの生成とFunctionコンストラクター

ここまではJavaScriptの基本的な動作を見てきましたが、ここからはもう少し応用的な内容に移っていこうと思います。

JavaScriptではオブジェクトとして数値や文字列を扱いましたが、配列や関数もオブジェクトとして扱います。あらゆるものをオブジェクトとして考えることができます。

ここでは特に関数コンストラクターについて見ていこうと思います。

オブジェクトとprototypeチェーン
Functionコンストラクターとprototype
prototypeチェーンをコンソールで確認
まとめ

オブジェクトとprototypeチェーン

JavaScriptではあらゆるものがオブジェクトとして扱われますが、組み込みオブジェクトとしてFunctionコンストラクターがあります。

オブジェクトは、メソッドとプロパティを通して相互に作用します。オブジェクトはprototypeのプロパティを持ち、他のオブジェクトを継承してメソッドとプロパティを利用することができます。

コンストラクタのprototypeプロパティは、コンストラクタ自体のプロトタイプではなく、それを通して作成されるすべてのインスタンスのプロトタイプとなります。メソッドが呼ばれると、オブジェクト自身の中を探しますが、見つからない場合は継承先まで移動し、メソッドが見つかるまで続きます。これをprototypeチェーンと言います。

JavaScriptはオブジェクトをインスタンス化したとき、元となるオブジェクトに属するprototypeオブジェクトに対して、暗黙的に参照すると言うことになります。

Functionコンストラクターとprototype

それではFunctionコンストラクターを見て行きましょう。

これまではオブジェクトを次のような形で生成していました。

var member = {
    firstName: 'エドワード',
    birthYear: 2000,
    hobby: 'alchemy'
};

こういったオブジェクトこれまで操作してきました。

【JavaScript入門】thisキーワードと参照先

JavaScriptのthisキーワードについて基本的な参照を扱います。thisはスクリプトのどこからでも参照できる変数で、呼び出す場所、呼び出す文脈によって中身が変わる変数です。関数の外と内、オブジェクト、メソッドでの参照を見てみます。

ここではFunctionコンストラクターを使って次のように設定して行きます。

var Person = function(firstName, birthYear, hobby) {
    this.firstName = firstName;
    this.birthYear = birthYear;
    this.hobby = hobby;
};

Functionコンストラクターを利用する時は、変数を大文字で始めるというのが慣例のようですので、ここではPersonとしています。

これをprototypeオブジェクトとして次のようにメソッドを追加します。

Person.prototype.calculateAge = function() {
    console.log(2019 - this.birthYear);
};

Person.prototype.lastName = 'エルリック';

Personにドット(.)でprototypeに繋げてメソッド名（ここではcalculateAge）を指定して、関数を定義しています。ここでは年齢の計算をしています。もう一つは、lastNameを定義しています。

ここから新たなオブジェクトを生成してみます。

var edward = new Person('エドワード', 2000, '錬金術');
var alphonse = new Person('アルフォンス', 2004, '鎧と錬金術');

edward.calculateAge();
alphonse.calculateAge();

console.log(edward.firstName + " " + edward.lastName);
console.log("趣味は" + edward.hobby);
console.log(alphonse.firstName + " " + alphonse.lastName);
console.log("趣味は" + alphonse.hobby);

このFunctionコンストラクターを利用して、newを使って新しいオブジェクトを生成しています。それぞれに名前、誕生年、趣味の値を入れて生成しています。

このオブジェクトからcaluculateAgeのメソッドを呼び出しと、名前や趣味の出力をしています。

ブラウザのJavaScriptコンソールには次のように表示されます。

こうして、追加したメソッドも、最初のオブジェクト（ここではPersonクラス）を参照しているのがわかります。

prototypeチェーンをコンソールで確認

JavaScriptコンソールの表示をクリア（丸に斜め印を押す）して、次のように順に入力して動きを確認してみます

Person
Person.prototype
edward.__proto__ === Person.prototype
edward.hasOwnProperty('hobby')
edward.hasOwnProperty('lastName')
edward instanceof Person

コンソールには次のように表示されます。（>印を押して内容を表示させています）