Javascript初心者に初心者++程度の自分が言語仕様を説明したときのメモ（第四回）

Javascript初心者に初心者++程度の自分が言語仕様を説明したときのメモ（第三回）の続き。

前回ではprototypeのメリットの１つである、複数オブジェクトの関数の共有を確認した。

今回は、次のメリットのいわゆるプロトタイプチェーンについて確認してみる。

プロトタイプチェーンとは、"他のオブジェクト（または null ）への内部的な繋がり"を持つprototypeを通して、クラスベースの言語で言うところの「オブジェクトの継承」と同じようなことを実現する仕組みで、以下のようにして実現できる。

function Animal() {
  this.name = 'Animal';
  this.voice = '------';
}
Animal.prototype = {
	bark: function(){
		return this.name + " barks: " + this.voice;
	}
}

animal = new Animal();

animal.bark(); // "Animal barks: ------"

これがベースにする予定のオブジェクトで、特筆するところもない。

この動物オブジェクトを引き継いだ犬オブジェクトを作る。

function Dog() {
	this.name = "dog";
	this.voice = "bowwow!"
}

Dog.prototype = animal;

var dog = new Dog();
dog.bark(); // "dog barks: bowwow!"

nameとvoiceはDogオブジェクトのものを使っているが、Dogオブジェクトでは定義していないbark関数が使えている。

今度は、関数以外のプロパティも継承しないオブジェクトを作ってみる。

function Rabbit() {
	this.name = "rabbit";
}

Rabbit.prototype = animal;

var rabbit = new Rabbit();

rabbit.bark(); // "rabbit barks: ------"

Rabbitオブジェクトではvoiceを定義しなかった。それでも、undefinedとはならず、Animalオブジェクトで定義したvoiceが参照されていることがわかる。
なお、うさぎ好きの人は「うさぎも鳴くよ」と言いたくなるかもしれないが、そこはスルーでおねがいします。

この通り、プロトタイプチェーンとは、アクセスされた各プロパティについて、自オブジェクトに存在しなければ、prototypeをたどっていき、発見したらそれを使う、という仕組みだ。

ちなみにJavascriptでは、delete演算子でプロパティを削除することもできる。

bulldog = new Dog();
bulldog.bark();
// ブルドックはあまり鳴かないらしい
delete bulldog.voice;

bulldog.bark(); // "dog barks: ------"

とこの通り、dogからvoiceを削ってみると、Animalオブジェクトのvoiceが参照され、bark()の結果が変わったことが確認できる。

今回はプロトタイプチェーンの基礎編ということで、終わり。

マリオカート8