3.1 プロトタイプの概念
プロトタイプはJavaScriptの重要な概念の一つで、オブジェクトが他のオブジェクトからプロパティやメソッドを継承することができる。多くの他のプログラミング言語では、継承はクラスを通じて行われているが、JavaScriptではプロトタイプに基づいている。プロトタイプとは何か、どのように動作するか、そしてどのように使用するかを見てみよう。
JavaScriptのプロトタイプは、他のオブジェクトがプロパティやメソッドを継承できるオブジェクトのことである。JavaScriptの各オブジェクトは、他のオブジェクトへの隠された参照、つまりそのプロトタイプを指し示す隠されたプロパティ[[Prototype]]を持っている。
このプロトタイプはさらに独自のプロトタイプを持つことができ、プロトタイプチェーン（prototype chain）を形成することで、オブジェクトのプロパティとメソッドはこのチェーンを通じて継承される。この仕組みは、オブジェクトが機能を共有し、オブジェクトの階層を作成するのに役立つ。
プロパティ proto
JavaScriptでは、各オブジェクトには__proto__プロパティがあり、これがそのプロトタイプを指し示す。このプロパティは、オブジェクト内に見つからないプロパティやメソッドを探すために使用される。
この例では、オブジェクトchildはオブジェクトparentからメソッドgreet()を継承している:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // 出力: Hello from parent
3.2 プロトタイプの作成と使用
1. Object.create()
メソッドObject.create()は、指定されたプロトタイプを持つ新しいオブジェクトを作成する。
例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // 出力: Hello from parent
2. プロトタイプへのプロパティとメソッドの追加
プロパティとメソッドをプロトタイプに追加して、それを継承するすべてのオブジェクトで使えるようにすることができる。
この例では、メソッドspeak()がプロトタイプanimalに追加され、オブジェクトdogで利用できる:
const animal = {
speak() {
console.log(`${this.name} makes a noise.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // 出力: Buddy makes a noise.
3. オブジェクトのプロトタイプの変更
オブジェクトのプロトタイプはメソッドObject.setPrototypeOf()を使って変更できる。
この例では、オブジェクトduckのプロトタイプがanimalからbirdに変更される:
const animal = {
speak() {
console.log('Animal speaks');
}
};
const bird = {
fly() {
console.log('Bird flies');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Duck quacks');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // 出力: Bird flies
duck.quack(); // 出力: Duck quacks
3.3 プロトタイプの操作
1. オブジェクトのプロトタイプの確認
メソッドObject.getPrototypeOf()を使用すると、オブジェクトのプロトタイプを取得できる。
例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // 出力: true
2. オブジェクトがプロトタイプに属しているかの確認
演算子instanceofは、オブジェクトが特定のコンストラクタまたはプロトタイプのインスタンスであるかどうかを確認するために使用される。
例:
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // 出力: true
3. オブジェクトとそのプロトタイプのプロパティの反復
オブジェクトとそのプロトタイプのプロパティを反復するには、for...inループを使用して、すべての列挙可能なプロパティを列挙できる。
例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// 出力:
// name
// greet
オブジェクトの独自のプロパティのみを反復するには、メソッドObject.keys()やfor...ofループとObject.entries()メソッドを使用する。
例:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // 出力: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// 出力:
// name Child
GO TO FULL VERSION