JavaScript プロトタイプチェーンと継承メカニズムについての深い理解

JavaScript は柔軟で強力なプログラミング言語であり、その独自のプロトタイプチェーンと継承メカニズムはその中核機能の 1 つです。この記事では、読者がこの重要な概念をよりよく理解できるように、JavaScript のプロトタイプチェーンと継承メカニズムについて詳しく説明します。

プロトタイプチェーンとは何ですか?

JavaScript では、すべてのオブジェクトに、プロトタイプと呼ばれる別のオブジェクトに内部リンクする参照があります。プロトタイプオブジェクトにはプロパティとメソッドを含めることができ、他のオブジェクトはこれらのプロパティとメソッドを継承できます。オブジェクトのプロパティまたはメソッドにアクセスすると、JavaScript はまずオブジェクト自体を調べ、見つからない場合は、プロパティまたはメソッドが見つかるか、プロトタイプチェーンの先頭に到達するまで、プロトタイプチェーンを検索します。

上記のコードでは、 2 つのクラスPersonとを定義しStudent、キーワードを使用してクラスのサブクラスextendsを作成しました。プロトタイプチェーンを介してメソッドの継承を実装すると、サブクラスが親クラスのメソッドに確実にアクセスできるようになります。StudentTeacher

オブジェクトのプロトタイプチェーンを作成する

__proto__すべての JavaScript オブジェクトには、オブジェクトを作成したコンストラクターのプロトタイプオブジェクトを指す組み込みプロパティがあります。このリンクがプロトタイプチェーンの鍵となります。これを例で理解してみましょう。

function Animal() {}
const dog = new Animal();

console.log(dog.__proto__); // 输出：Animal {}
console.log(Animal.prototype); // 输出：Animal {}
console.log(dog.__proto__ === Animal.prototype); // 输出：true

上の例では、空のコンストラクAnimalターを作成し、キーワードを使用して名前を付けたオブジェクトをnew作成しました。を指すので、そのプロパティとメソッドを継承できます。dogdog.__proto__Animal.prototypedogAnimal.prototype

プロトタイプチェーンの継承とメソッドの書き換え

JavaScript では、サブクラスは親クラスのメソッドを継承でき、継承されたメソッドをオーバーライドすることもできます。上記のコード例で説明してみましょう。

class Person{
  constructor(name) {
    this.name=name;
  }
  introduce(){
    console.log(`Hello, I am ${this.name}`);
  }
  drink(){
    console.log('I am drinking');
  }
}
class Student extends Person{
  constructor(name,score) {
    super(name)
    this.score= score;
  }
  introduce(){
    console.log(`Hello, I am ${this.name}.and ${this.score}is my score`);
  }
}
const student =new Student('John', 100);
student.introduce();
class Teacher extends Person{
  constructor(name,subject){
    super(name)
    this.subject=subject;
  }
  introduce(){
    console.log(`Hello, I am ${this.name}.and ${this.subject}is my subject`);
  }
}
const teacher =new Teacher('John', 'Math');
teacher.introduce();
console.log(student)
teacher.drink();

上記の例では、StudentクラスはPersonクラスを継承し、introduce()メソッドをオーバーライドします。を呼び出すと、クラス内のメソッドではなく、クラス内のメソッドstudent.introduce()が実行されます。Studentintroduce()Person

継承とスーパーキーワード

サブクラスでは、superキーワードを使用してスーパークラスのコンストラクターとメソッドを呼び出すことができます。これにより、サブクラスとその親クラスの関連性が維持され、サブクラスに追加の機能が追加されます。上の例を続けて、Teacherクラスに新しいメソッドを追加し、スーパークラスのコンストラクターを呼び出してみましょう。

上記の例では、コンストラクターsuper(name)を呼び出すことで、クラスがインスタンス化されるときに初期化のために親クラスのコンストラクターも呼び出されることを保証します。PersonTeacher

class Teacher extends Person {
  constructor(name, subject) {
    super(name);
    this.subject = subject;
  }

  introduce() {
    console.log(`Hello, I am ${this.name}. and ${this.subject} is my subject`);
  }

  teach() {
    console.log('I am teaching');
  }
}

const teacher = new Teacher('John', 'Math');
teacher.introduce(); // 输出：Hello, I am John. and Math is my subject
teacher.teach(); // 输出：I am teaching

要約する

JavaScript のプロトタイプチェーンと継承メカニズムは、JavaScript の強力な機能の 1 つです。プロトタイプチェーンを通じて、オブジェクトは他のオブジェクトのプロパティとメソッドを継承して、コードの再利用と編成を実現できます。サブクラスでは、extendsキーワードを通じて親クラスを継承し、superキーワードを使用して親クラスのコンストラクターとメソッドを呼び出すことができます。このようにして、より柔軟で拡張可能なコード構造を作成できます。

この記事が JavaScript のプロトタイプチェーンと継承メカニズムを理解するのに役立つことを願っています。この概念をしっかり理解すると、JavaScript コードをより快適に作成できるようになります。コーディングを楽しんでください!