JS のプロトタイプ プロトタイプ チェーンの詳細説明
JavaScript では、各オブジェクトにはプロトタイプ (プロトタイプ) があり、プロトタイプとは、共有プロパティとメソッドを含むオブジェクトです。プロトタイプ チェーンは、オブジェクトがプロパティとメソッドを継承および共有できるようにするメカニズムです。
プロトタイプ チェーンは、オブジェクトのプロトタイプを指す各オブジェクトの _proto_ 属性を通じて実装されます。オブジェクトが必要なプロパティまたはメソッドを見つけられない場合、オブジェクトはプロトタイプ チェーンを見つけるか、プロトタイプ チェーンの最後に到達するまで、プロトタイプ チェーンに沿って続行します。
パーソンというコンストラクターとそのインスタンス オブジェクトを作成する例を見てみましょう:
function Person(name, age) { this.name = name; this.age = age; } var person1 = new Person('Alice', 25);
new 演算子を使用して 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 コードを記述するときは、プロトタイプ チェーンを深く理解することが非常に重要です。
概要:
この記事の説明を通じて、JavaScript のプロトタイプ チェーンについてより深く理解していただければ幸いです。
以上がJavaScript のプロトタイプ チェーン メカニズムの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。