JavaScriptのプロトタイプチェーンを理解しよう（オブジェクト継承の仕組み）初心者にもわかるやさしい解説
生徒
「JavaScriptのプロトタイプチェーンって何ですか？よく聞くけど難しそうで…」
先生
「プロトタイプチェーンは、JavaScriptのオブジェクトが『他のオブジェクトの機能を使える仕組み』のことです。難しく聞こえますが、簡単に言うと『お手本から性質を受け継ぐこと』なんですよ。」
生徒
「お手本から性質を受け継ぐ？それはどういう意味ですか？」
先生
「例え話を交えて説明しますね。まずは基本から見ていきましょう！」
1. プロトタイプチェーンとは？オブジェクトの継承の仕組み
JavaScriptのオブジェクトは、他のオブジェクトをお手本（プロトタイプ）として持つことができ、そのお手本が持っている性質や動作（プロパティやメソッド）を使うことができます。この仕組みをプロトタイプチェーンと言います。
このチェーンは、オブジェクトが持っていないものを順番に「親」のオブジェクトに探しにいくことを意味しています。
2. 例え話：プロトタイプチェーンはお手本を借りる仕組み
例えば、あなたが絵を描くときに、教科書の絵を参考にして描くとします。教科書の絵がプロトタイプで、あなたの絵がオブジェクトです。
もしあなたの絵に「色」がなければ、教科書の絵を見て「色」を使います。これがプロトタイプチェーンのイメージです。オブジェクトは自分になければ、プロトタイプをたどって探しにいくのです。
3. JavaScriptでプロトタイプチェーンを見る簡単な例
const animal = {
eats: true,
walk() {
console.log("歩いています");
}
};
const rabbit = {
jumps: true,
};
rabbit.__proto__ = animal; // rabbitのプロトタイプをanimalに設定
console.log(rabbit.eats); // true（rabbitには無いがanimalから継承）
rabbit.walk(); // 「歩いています」と表示
console.log(rabbit.jumps); // true（rabbit自身のプロパティ）
この例では、rabbitはanimalをプロトタイプとして持ち、animalの性質や動作を使うことができます。
4. __proto__とは？プロトタイプを指す特別なプロパティ
__proto__はオブジェクトが持つ「このオブジェクトの親はどれか？」を示す特別なプロパティです。これによってプロトタイプチェーンができています。
ただし、__proto__は古い書き方で、通常はObject.getPrototypeOf()やObject.setPrototypeOf()を使うことが推奨されています。
5. new演算子とプロトタイプチェーンの関係
JavaScriptでnew演算子を使うと、新しいオブジェクトが作られますが、そのオブジェクトは作った関数のプロトタイプを親として持ちます。
function Person(name) {
this.name = name;
}
Person.prototype.greet = function() {
console.log("こんにちは、" + this.name + "さん！");
};
const taro = new Person("太郎");
taro.greet(); // 「こんにちは、太郎さん！」と表示
ここでtaroはPerson.prototypeを親に持ち、greetメソッドを使えます。
6. プロトタイプチェーンがあるからできること
- 同じ種類のオブジェクトで共通の機能を持たせることができる。
- メモリを節約しながら便利な機能を共有できる。
- オブジェクト同士で情報や動作を受け継ぐことができる（継承の仕組み）。
この仕組みはJavaScriptの基本的で重要な考え方なので、しっかり理解しましょう。
7. プロトタイプチェーンの確認方法
オブジェクトのプロトタイプを調べたいときは、Object.getPrototypeOf()を使います。
console.log(Object.getPrototypeOf(rabbit) === animal); // true
このように、どのオブジェクトを親に持っているか調べられます。
8. 注意点：プロトタイプチェーンは無限に続くわけではない
プロトタイプチェーンは最後に必ずnullという特別な値で終わります。nullは「これ以上親がいません」という意味です。
console.log(Object.getPrototypeOf(animal)); // nullでないなら更に親がいる
これで探し物をどこまでも続ける無限ループにならず、止まることができます。
9. プロトタイプチェーンのまとめポイント
- JavaScriptのオブジェクトは他のオブジェクトを親にして性質や動作を共有できる。
- この親をプロトタイプと呼び、それをたどる仕組みがプロトタイプチェーン。
newで作ったオブジェクトは作成関数のプロトタイプを親に持つ。- チェーンの最後は
nullで終わる。 - プロトタイプチェーンは継承の基礎であり、効率よく機能を共有できる。
