JavaScript のプロトタイプ チェーン: 継承とオブジェクト ルックアップについて

JavaScript のプロトタイプ チェーン

プロトタイプ チェーンは、JavaScript の継承モデルの基本概念です。これにより、オブジェクトが他のオブジェクトからプロパティやメソッドを継承できるようになり、JavaScript での継承の仕組みの背後にある重要なメカニズムとなります。

プロトタイプチェーンの仕組み

JavaScript でオブジェクトを作成すると、そのオブジェクトはプロトタイプとして機能する別のオブジェクトにリンクされます。すべてのオブジェクトには、プロトタイプ オブジェクトを参照する非表示の内部プロパティ [[Prototype]] があります。

オブジェクトのプロパティまたはメソッドにアクセスすると、JavaScript はまずそのオブジェクトにプロパティが存在するかどうかを確認します。そうでない場合、JavaScript はチェーンをオブジェクトのプロトタイプまで検索し、次にそのプロトタイプのプロトタイプを検索し、Object.prototype (プロトタイプ チェーンのルート) に到達するまで検索します。プロパティまたはメソッドがチェーンのどのレベルでも見つからない場合、JavaScript は unknown を返します。

プロトタイプチェーンの例

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."

この例では:

• Dog オブジェクトは、プロトタイプ チェーンを介して Animal プロトタイプから継承します。
• dog.speak() を呼び出すと、JavaScript は最初に Dog オブジェクトの speech メソッドを探します。そこに見つからない場合は、Dog.prototype をチェックし、最後に Animal.prototype をチェックします。
• Animal.prototypeにspeakが存在するので、それを見つけて実行します。

プロトタイプ チェーンと Object.prototype

JavaScript のすべてのオブジェクトは、最終的に、プロトタイプ チェーンの最上位のプロトタイプ オブジェクトである Object.prototype を継承します。これは、配列、関数、ユーザー定義オブジェクトなどの組み込みオブジェクトのインスタンスを含むすべてのオブジェクトが、Object.prototype.
で定義されたメソッドとプロパティにアクセスできることを意味します。

const obj = {};
console.log(obj.toString()); // Output: "[object Object]"
// The toString method is inherited from Object.prototype

プロトタイプチェーン検索プロセス

1. まず、JavaScript はオブジェクト自体のプロパティまたはメソッドを探します。
2. 次に、プロパティが見つからない場合、JavaScript はオブジェクトのプロトタイプを調べます。
3. 次に、プロトタイプのプロトタイプをチェックし、Object.prototype に到達するまでチェーンを上っていきます。
4. Object.prototype でもプロパティが見つからない場合は、unknown が返されます。

プロトタイプチェーンの視覚化

次の例を考えてみましょう:

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

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

const john = new Person("John");

console.log(john.sayHello());  // Output: "Hello, John"
console.log(john.toString());  // Output: "[object Object]"

この場合、john のプロトタイプ チェーンは次のようになります:

// Constructor function for Animal
function Animal(name) {
    this.name = name;
}

// Adding a method to Animal's prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

// Constructor function for Dog
function Dog(name) {
    Animal.call(this, name); // Inherit properties from Animal
}

// Set up the prototype chain so Dog inherits from Animal
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Reset the constructor reference

// Create an instance of Dog
const dog = new Dog("Buddy");
dog.speak();  // Output: "Buddy makes a noise."

• john には toString メソッドが直接ないため、JavaScript は Person.prototype を調べ、そこに見つからない場合は Object.prototype をチェックします。
• 最後に、Object.prototype で見つからない場合は、unknown を返します。

結論

JavaScript のプロトタイプ チェーンにより、強力な継承機能が有効になり、オブジェクトが他のオブジェクトからプロパティやメソッドを継承できるようになります。プロトタイプ チェーンがどのように機能するかを理解することは、JavaScript をマスターし、より効率的なオブジェクト指向のコードを作成するために重要です。

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript のプロトタイプ チェーン: 継承とオブジェクト ルックアップについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。