JavaScript Prototypal Inheritance

概要：このチュートリアルでは、JavaScriptのプロトタイプ継承がどのように機能するかを学習します。

入門 – JavaScript プロトタイピング継承

もしあなたが Java や C++ などの他のオブジェクト指向プログラミング言語を使用したことがあるなら、継承の概念に精通していることでしょう。 新しいクラスで既存のクラスの機能を再利用したい場合、既存のクラスを継承する新しいクラスを作成することができます。 これは古典的な継承と呼ばれます。

JavaScript は古典的な継承を使用しません。

プロトタイプ継承では、オブジェクトはプロトタイプのリンクを通じて別のオブジェクトからプロパティを「継承」します。

JavaScript プロトタイプ継承と __proto__

この概念をより明確にするために例を挙げましょう。

以下は person オブジェクトを定義しています:

Code language: JavaScript (javascript)

この person オブジェクトには2つのプロパティがあります:

• name これは文字列値を保持します。
• greet これはたまたま関数である値を保持しています。 greet は person オブジェクトのメソッドとして知られています。

デフォルトでは、JavaScript は Object() 関数と、Object() 関数の prototype プロパティを介してアクセスできるプロトタイプオブジェクトを提供します:

オブジェクトを定義するのにオブジェクトリテラルを使用すると、オブジェクトが Object のインスタンスとなります。 したがって、person instanceof Object 式は true:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

person オブジェクトも ] リンクを介して Object.prototype にリンクします。

言い換えれば、person オブジェクトを介して、Object.prototype オブジェクトの任意のプロパティにアクセスすることが可能です。 例えば:

Code language: JavaScript (javascript)

出力:

Code language: JavaScript (javascript)

はオブジェクトから文字列へのデフォルト変換です。

personオブジェクトのtoString()メソッドを呼び出すと、JavaScriptはそれを見つけることができません。 そこでJavaScriptはプロトタイプチェーンをたどり、Object.prototypeオブジェクト上のメソッドを探します。 JavaScriptはObject.prototypeオブジェクト上のtoString()メソッドを見つけることができ、それを実行します。

personオブジェクトのプロトタイプにアクセスするには、その__proto__プロパティを使用します：

Code language: JavaScript (javascript)

出力：

Code language: JavaScript (javascript)

以下ではteacherという別のオブジェクトが定義されています。 teacherオブジェクトはteach()メソッドを持っています：

Code language: JavaScript (javascript)

もしteacherオブジェクトがpersonオブジェクトのすべてのプロパティにアクセスしたい場合、teacherオブジェクトのプロトタイプをpersonオブジェクトに設定すればいいのです。

Code language: JavaScript (javascript)

なお、__proto__は実コードでは決して使用しないでください。

さて、teacher オブジェクトは、person オブジェクトからプロトタイプ チェーンを通じて name プロパティと greet() メソッドにアクセスできます:

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

teacherオブジェクトの greet() メソッドを呼び出すと、JavaScript がまず teacherオブジェクトのそれを見つけます。

JavaScriptはteacherオブジェクト上のメソッドを見つけられないので、プロトタイプチェーンに従ってpersonオブジェクト上のメソッドを探します。

JavaScriptでは、teacherオブジェクトがpersonオブジェクトのプロパティを継承していると言います。 そしてこれがプロトタイプ継承です。

ES5 におけるプロトタイプ継承を実装する標準的な方法

ES5 では、Object.create() メソッドを使用してプロトタイプ継承を扱う標準的な方法を提供しました。

Now note that you should use the newer ES6 class and extends keywords to implement inheritance.

All Rights Reserved.

Object.create() メソッドは新しいオブジェクトを作成し、既存のオブジェクトを新しいオブジェクトのプロトタイプとして使用します。

Code language: JavaScript (javascript)

Object.create()メソッドは 2 つの引数を受け取ります。

もし提供されるなら、第2引数 (propertiesObject) は新しいオブジェクトのための追加のプロパティを定義するオプションのオブジェクトである。

personオブジェクトがあるとします:

Code language: JavaScript (javascript)

以下では、personオブジェクトの__proto__で空のteacherオブジェクトを作成します:

Code language: JavaScript (javascript)

その後、teacherオブジェクトのプロパティを定義できます。

Code language: JavaScript (javascript)

または、これらのステップをすべて次のように 1 つのステートメントで行うこともできます:

Code language: JavaScript (javascript)

ES5 では、オブジェクトのプロトタイプを返す Object.getPrototypeOf() メソッドも導入されました。 たとえば、

Code language: JavaScript (javascript)

Output:

Code language: JavaScript (javascript)

Summary

• 継承では、あるオブジェクトが別のオブジェクトのプロパティやメソッドを使用することができます。
• JavaScript はプロトタイプ リンクによって実現されるプロトタイプ継承を使用します。