JS

プロトタイプ

中級

読み方:プロトタイプ|英語:Prototype

オブジェクトが他のオブジェクトからプロパティやメソッドを継承する仕組みだよ。いつ使う? 普段は意識しなくてOKだけど、配列のmap()やfilter()が使えるのはArray.prototypeに定義されているからだよ。間違いやすいポイント: classはプロトタイプの糖衣構文(見た目を簡単にしたもの)だよ。classを使っていても内部ではプロトタイプチェーンが動いているよ。

やさしい説明

プロトタイプは、オブジェクトが他のオブジェクトからメソッドを「借りる」仕組みです。JavaScriptの継承はプロトタイプチェーンで実現されています。

配列で .map() や .filter() が使えるのは、Array.prototype にこれらのメソッドが定義されているからです。全ての配列がこのメソッドを共有しています。

class 構文は内部的にプロトタイプを使っています(シンタックスシュガー)。初心者のうちは class を使えば十分で、プロトタイプを直接触る必要はほとんどありません。

具体例・使い方

// 配列が.map()を使える理由
const arr = [1, 2, 3];
arr.map(x => x * 2); // Array.prototypeのmapを借りている

// classは内部的にプロトタイプを使っている
class Animal {
  speak() { return "..."; }
}
class Dog extends Animal {
  speak() { return "ワン!"; }
}
// Dog → Animal → Object のプロトタイプチェーン

いつ使う?

直接使う機会は少ないですが、「なぜ配列にmapメソッドがあるのか」「classの継承がどう動くのか」を理解するために知っておくと役立ちます。

間違いやすいポイント

❌ プロトタイプを直接変更する

Array.prototype に独自メソッドを追加するのは危険です。他のライブラリと衝突する可能性があります。class を使って継承しましょう。

よくある疑問

Q: プロトタイプチェーンとは?

A: オブジェクトにプロパティがない場合、親(プロトタイプ)を辿って探す仕組みです。最終的にnullに到達すると探索終了です。

Q: classとprototypeの関係は?

A: classはprototypeベースの継承を書きやすくした構文です。class Dog extends Animal {} は内部でプロトタイプチェーンを設定しています。

Q: __proto__とprototypeの違いは?

A: __proto__はオブジェクトの親への参照、prototypeはコンストラクタ関数が持つ「子に渡すメソッド集」です。

関連用語

📖 関連レッスン

レッスンを見る →

関連ブログ記事

⚠️ 関連するエラー

❓ 関連するQ&A