ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript のプロトタイプ チェーン メカニズムの詳細な分析

JavaScript のプロトタイプ チェーン メカニズムの詳細な分析

PHPz
PHPzオリジナル
2024-02-18 19:20:06766ブラウズ

JavaScript のプロトタイプ チェーン メカニズムの詳細な分析

JS のプロトタイプ プロトタイプ チェーンの詳細説明

JavaScript では、各オブジェクトにはプロトタイプ (プロトタイプ) があり、プロトタイプとは、共有プロパティとメソッドを含むオブジェクトです。プロトタイプ チェーンは、オブジェクトがプロパティとメソッドを継承および共有できるようにするメカニズムです。

プロトタイプ チェーンは、オブジェクトのプロトタイプを指す各オブジェクトの _proto_ 属性を通じて実装されます。オブジェクトが必要なプロパティまたはメソッドを見つけられない場合、オブジェクトはプロトタイプ チェーンを見つけるか、プロトタイプ チェーンの最後に到達するまで、プロトタイプ チェーンに沿って続行します。

パーソンというコンストラクターとそのインスタンス オブジェクトを作成する例を見てみましょう:

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

var person1 = new Person('Alice', 25);

new 演算子を使用して person1 オブジェクトを作成する場合、次の操作が実行されます:

  1. 空のオブジェクト person1 を作成します。
  2. person1 の _proto_ 属性を Person コンストラクターのプロトタイプ (person.prototype) にポイントします。
  3. パーソン コンストラクターを実行し、これを person1 にポイントし、名前と年齢の属性を割り当てます。

実際、person.prototype は person1 のプロトタイプです。プロトタイプにメソッドと属性を追加できます:

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

これで、person1 オブジェクトは SayHello メソッドを使用できるようになります:

person1.sayHello();  // 输出: Hello, my name is Alice

person1.sayHello() メソッドを呼び出すと、JavaScript はまず person1 オブジェクト内でこのメソッドを検索します。見つからない場合は、引き続き Person.prototype 内のプロトタイプ チェーンに沿って検索し、実行します。それを見つけてからです。

新しい属性を Person.prototype に追加すると、person1 もそれを使用できます:

Person.prototype.gender = 'Female';
console.log(person1.gender);  // 输出: Female

プロトタイプ チェーンは継承も実装でき、新しいコンストラクター Student を作成して継承させることができます。 from Person:

function Student(name, age, school) {
    Person.call(this, name, age);
    this.school = school;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

上記のコードでは、Object.create() メソッドを使用して Student.prototype オブジェクトを作成し、その _proto_ 属性を Person.prototype にポイントし、Student.prototype .constructor ポイントを設定します。 Student コンストラクターに。

ここで、student1 オブジェクトを作成し、 Person から継承したプロパティとメソッドを使用できます。

var student1 = new Student('Bob', 20, 'ABC School');

console.log(student1.name);   // 输出: Bob
console.log(student1.age);    // 输出: 20
student1.sayHello();          // 输出: Hello, my name is Bob
console.log(student1.school);  // 输出: ABC School

上記の例では、student1 オブジェクトは、 Person から継承したプロパティとメソッドにアクセスできます。その理由は、プロトタイプ チェーンを通じてこれらのプロパティとメソッドを見つけることができるためです。

プロトタイプ チェーンは、オブジェクトの継承と共有プロパティとメソッドを実装するための Javascript の重要なメカニズムであり、コードをより効率的かつ柔軟にします。 JavaScript コードを記述するときは、プロトタイプ チェーンを深く理解することが非常に重要です。

概要:

  • すべてのオブジェクトにはプロトタイプがあります。プロトタイプは、共有のプロパティとメソッドを含むオブジェクトです。
  • オブジェクトの _proto_ 属性を通じて、プロトタイプ チェーンを実現し、属性とメソッドの継承と共有を実現できます。
  • プロトタイプ チェーンは、JavaScript でオブジェクトの継承と共有プロパティとメソッドを実装するメカニズムです。

この記事の説明を通じて、JavaScript のプロトタイプ チェーンについてより深く理解していただければ幸いです。

以上がJavaScript のプロトタイプ チェーン メカニズムの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。