JavaScript のプロトタイプ継承を理解する: 初心者ガイド

JavaScript は、オブジェクト指向プログラミング (OOP) パラダイムを備えた強力な動的言語です。他の多くの OOP 言語 (Java や C など) とは異なり、JavaScript は古典的な継承を使用しません。代わりに、柔軟かつユニークなプロトタイプの継承を採用しています。

このブログでは、プロトタイプ継承の概念を深く掘り下げ、それがどのように機能するかを調査し、その力をより深く理解するために実践的な例を見ていきます。

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

プロトタイプ継承により、JavaScript オブジェクトはプロトタイプ チェーンを介してプロパティとメソッドを共有できます。すべての JavaScript オブジェクトには、そのプロトタイプと呼ばれる別のオブジェクトへの内部リンクがあります。オブジェクト自体でプロパティまたはメソッドが見つからない場合、JavaScript はプロトタイプ チェーンでそれを探します。

このメカニズムにより、オブジェクトは他のオブジェクトから動作を「継承」することができ、JavaScript のオブジェクト指向機能の基礎となります。

重要な用語

1.プロトタイプ:
別のオブジェクトがプロパティを継承するオブジェクト。

2.プロト:
オブジェクトのプロトタイプへの内部参照 (またはリンク)。

3.オブジェクト.プロトタイプ:
すべての JavaScript オブジェクトが間接的に継承するトップレベルのプロトタイプ。

4.プロトタイプチェーン:
JavaScript がプロパティまたはメソッドを見つけるためにたどるプロトタイプの階層。

プロトタイプ継承はどのように機能しますか?

これは、実際のプロトタイプの継承を示す例です:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

説明

1. 犬オブジェクトは、Object.create() メソッドを使用して動物オブジェクトからプロパティとメソッドを継承します。
2. dog.eats にアクセスすると、JavaScript はまず、eats プロパティが Dog に直接存在するかどうかを確認します。そうでない場合は、動物プロトタイプでプロパティを探します。

プロトタイプの作成

Object.create() メソッドの使用

Object.create() は、プロトタイプの継承を設定する最も簡単な方法です。

const vehicle = {
  wheels: 4,
  drive() {
    console.log("Vehicle drives");
  },
};

const car = Object.create(vehicle);
console.log(car.wheels); // 4
car.drive(); // "Vehicle drives"

コンストラクター関数の使用

ES6 クラスが導入される前は、コンストラクター関数が継承を使用してオブジェクトを作成する主な方法でした。

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

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

const john = new Person("John");
john.greet(); // "Hello, my name is John"

ここでは、Person コンストラクターは Person.prototype を使用してプロトタイプを設定します。 new Person() 経由で作成されたオブジェクトは、Person.prototype.

で定義されたメソッドを継承します。

ES6 クラスの使用

ES6 ではクラス構文が導入され、内部でプロトタイプ チェーンを活用しながら継承がより直観的になりました。

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // "Buddy barks"

これは古典的な継承のように見えますが、依然として JavaScript のプロトタイプ継承に基づいています。

動作中のプロトタイプ チェーン

プロトタイプ チェーンがどのように機能するかを視覚化してみましょう:

// Define a base object
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  },
};

// Create a new object that inherits from 'animal'
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // true (inherited from animal)
dog.walk(); // "Animal walks" (method inherited from animal)

console.log(dog.barks); // true (own property)

プロトタイプチェーン:

• 子オブジェクト:sayHi()
• 親オブジェクト (プロトタイプ):greet()
• Object.prototype (基本プロトタイプ): toString() のようなメソッド

これらのいずれにもメソッドまたはプロパティが見つからない場合、JavaScript は unknown を返します。

プロトタイプ継承の利点

1.メモリ効率:
共有メソッドとプロパティはプロトタイプに保存され、インスタンス間で複製されません。

2.動的継承:
プロトタイプは実行時に変更でき、継承するすべてのオブジェクトに変更が反映されます。

3.柔軟な構造:
オブジェクトは、厳密なクラス階層を必要とせずに、他のオブジェクトから直接継承できます。

制限事項

1.プロトタイプチェーンのパフォーマンス:
プロトタイプ チェーンが長いと、プロパティの検索が遅くなる可能性があります。

2.初心者の混乱:
proto、プロトタイプ、Object.create() を理解するのは困難を伴う場合があります。

3.プライベートフィールドの欠如:
ES6 より前は、プロトタイプを使用してプライベート プロパティを実装するのは困難でした。

結論

プロトタイプ継承は JavaScript の OOP モデルの基礎であり、柔軟性と動的な動作を提供します。 Object.create()、コンストラクター関数、ES6 クラスのいずれを使用している場合でも、プロトタイプ チェーンを理解することが、効果的かつ効率的な JavaScript コードを作成する鍵となります。

この知識があれば、ミックスイン、プロトタイプの操作、古典的な継承とプロトタイプの継承の違いなどの高度なトピックを検討できるようになります。

コーディングを楽しんでください! ?

以上がJavaScript のプロトタイプ継承を理解する: 初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。