2017/8/4更新

JavaScriptの継承：プロトタイプチェーン

JavaScriptはプロトタイプベースのオブジェクト指向言語です。ここでは、プロトタイプチェーンによる継承機構の仕組みについて説明します。

プロトタイプチェーンを用いた継承

prototypeを使うといわゆる継承を実現することができ、このことをプロトタイプチェーンと呼びます。継承とは、あるオブジェクトの性質を引き継いで他のオブジェクトから利用することです。

プロトタイプチェーンは、以下のように継承先コンストラクタ（クラスベースで言う子クラス）のprototypeプロパティに、継承元コンストラクタ（クラスベースで言う親クラス）のインスタンスを作成することで継承を行います。

var 継承先コンストラクタ.prototype = new 継承元コンストラクタ();

1	var 継承先コンストラクタ.prototype = new 継承元コンストラクタ();

次の例を見てみましょう。

//コンストラクタ
var Person = function(){}

//Personオブジェクトのprototypeにsingプロパティを登録
Person.prototype.sing = function(){
        alert("LaLaLa");
};

//コンストラクタ
var Student = function(){};

//Personを継承
//StudentオブジェクトのprototypeにPersonオブジェクトのインスタンスを登録
Student.prototype = new Person();

//インスタンス生成
var student_1 = new Student(); 

student_1.sing();  //LaLaLa

//コンストラクタ

var Person = function(){}

//Personオブジェクトのprototypeにsingプロパティを登録

Person.prototype.sing = function(){

alert("LaLaLa");

};

//コンストラクタ

var Student = function(){};

//Personを継承

//StudentオブジェクトのprototypeにPersonオブジェクトのインスタンスを登録

Student.prototype = new Person();

//インスタンス生成

var student_1 = new Student();

student_1.sing(); //LaLaLa

StudentオブジェクトのprototypeにPersonオブジェクトのインスタンスを登録することで、Studentオブジェクトのインスタンス（stu1）からPersonオブジェクトのprototypeに登録されたsingメソッドを呼び出すことができます。

プロトタイプチェーン内部での働き

まず、student_インスタンスにsingというプロパティが登録されているかを調べます。見つからない場合、Student.prototypeを調べます。そこにもsingプロパティが見つからない場合、更にStudentオブジェクトのprototypeに登録されたPersonオブジェクトprototypeを調べます。

その結果、Personオブジェクトのprototypeとして登録されたsingプロパティをメソッドとして実行します。

プロトタイプチェーンでは基底クラスまで検索される

このように、JavaScriptではprototypeにインスタンスを登録することによって、継承を実現しています。

上記のように、prototypeを上位のオブジェクトに遡って検索していく仕組みのことをプロトタイプチェーンと呼び、最も基底となるObject.prototypeまで（プロパティが見つからなければ）検索を続けます。

JavaScript

JavaScriptの継承：プロトタイプチェーン

プロトタイプチェーンを用いた継承

プロトタイプチェーン内部での働き

プロトタイプチェーンでは基底クラスまで検索される

Welcome to UX MILK

目次

購読