プロトタイプの詳細: JavaScript のバックボーン

プロトタイプは JavaScript の中核概念であり、オブジェクト指向プログラミング (OOP) 機能の基礎を形成します。他の言語は継承の基礎としてクラスを使用しますが、JavaScript はプロトタイプに依存します。この記事では、プロトタイプを詳しく調査し、プロトタイプが JavaScript の継承やオブジェクトの動作などにどのように影響を与えるのかを明らかにします。

---

プロトタイプとは何ですか?

JavaScript では、すべてのオブジェクトには、別のオブジェクトを指す [[Prototype]] と呼ばれる内部プロパティがあります。これはオブジェクトのプロトタイプであり、オブジェクト上で直接見つからないプロパティまたはメソッドのフォールバック メカニズムとして機能します。

プロトタイプチェーン

プロトタイプ チェーンは、リンクされた一連のプロトタイプです。オブジェクトでプロパティまたはメソッドが見つからない場合、JavaScript は null に達するまでチェーンを検索します。

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

ここでは、子には挨拶メソッドがないため、JavaScript は親へのプロトタイプ チェーンを検索し、そこで見つけます。

---

__proto__ とプロトタイプの混乱

JavaScript には、プロトタイプに関連して混乱を招く可能性のある 2 つの異なる用語があります。

1. __proto__:

   • これは、オブジェクトのプロトタイプを指すすべてのオブジェクトで使用できるアクセサー プロパティです。
   • オブジェクトの [[プロトタイプ]] にアクセスする方法です。

2. プロトタイプ:

   • これは関数 (特にコンストラクター関数) でのみ使用できるプロパティです。
   • その関数によって作成されるオブジェクトのプロトタイプを定義するために使用されます。

例:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

---

実際のプロトタイプ継承

JavaScript の継承はプロトタイプベースです。つまり、オブジェクトはクラスではなく他のオブジェクトから直接継承します。

継承の作成

const animal = {
  eat() {
    console.log("Eating...");
  }
};

const dog = Object.create(animal);
dog.bark = function () {
  console.log("Barking...");
};

dog.eat();  // Output: "Eating..."
dog.bark(); // Output: "Barking..."

犬オブジェクトは動物オブジェクトから Eat メソッドを継承します。

---

Object.create を使用したクリーンな継承

Object.create メソッドは、指定されたプロトタイプを使用して新しいオブジェクトを作成します。これは、継承を設定するためのよりクリーンで直感的な方法です。

例:

const person = {
  introduce() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const student = Object.create(person);
student.name = "John";
student.introduce();  // Output: "Hi, I'm John"

---

組み込みプロトタイプの拡張

配列やオブジェクトなどの組み込みプロトタイプを拡張することは可能ですが、競合が発生する可能性があるため、一般的には推奨されません。

例:

Array.prototype.last = function () {
  return this[this.length - 1];
};

console.log([1, 2, 3].last());  // Output: 3

それを避ける理由

• 互換性の問題: 他のライブラリはデフォルトのプロトタイプに依存する可能性があります。
• メンテナンス: 変更を行うと、既存のコードが壊れる可能性があります。

---

プロトタイプとクラス

ES6 では、JavaScript にクラス構文が導入され、より使い慣れた OOP エクスペリエンスが提供されました。ただし、内部ではクラスは依然としてプロトタイプを使用しています。

例:

const parent = { greet: () => console.log("Hello from parent!") };
const child = Object.create(parent);

child.greet();  // Output: "Hello from parent!"
console.log(child.hasOwnProperty('greet'));  // Output: false

クラスであっても、継承はプロトタイプベースです。

---

パフォーマンスの角度

プロトタイプベースの継承は、メソッドが複製されるのではなくインスタンス間で共有されるため、メモリ効率が高くなります。

例:

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function () {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person("Alice");

console.log(alice.__proto__ === Person.prototype);  // true
alice.sayHello();  // Output: "Hello, my name is Alice"

ここでは、ドライブは車ごとに複製されません。代わりに、両方のインスタンスが同じメソッドを共有します。

---

重要なポイント

1. プロトタイプによる継承の有効化: オブジェクトは、プロトタイプを通じて他のオブジェクトから継承します。
2. プロトタイプ チェーン: JavaScript はプロトタイプ チェーンを走査することでプロパティとメソッドを解決します。
3. Object.create: 継承をセットアップするクリーンな方法。
4. 組み込みプロトタイプの拡張を避ける: 予期しない動作や競合が発生する可能性があります。
5. クラスはプロトタイプを使用します: ES6 クラスは糖衣構文を提供しますが、内部では依然としてプロトタイプに依存しています。

プロトタイプを理解することは、JavaScript を習得するために不可欠です。 ES6 クラスにより、JavaScript でのオブジェクト指向プログラミングがより親しみやすくなりましたが、プロトタイプ システムは依然として言語の中核にあります。プロトタイプを深く掘り下げることで、効率的でスケーラブルで保守可能なコードを作成できるようになります。

以上がプロトタイプの詳細: JavaScript のバックボーンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。