JavaScript プロトタイプを理解する: 継承とメソッド共有の包括的なガイド

JavaScript プロトタイプ

JavaScript では、プロトタイプは他のオブジェクトの設計図として機能するオブジェクトです。 JavaScript のすべてのオブジェクトにはプロトタイプがあり、プロトタイプ自体は、オブジェクトのすべてのインスタンスで共有されるプロパティとメソッドを含むオブジェクトです。この概念は、JavaScript の継承メカニズムの中心です。

1. プロトタイプとは何ですか?

すべての JavaScript オブジェクトには、[[Prototype]] と呼ばれる内部プロパティがあります。このプロパティは、プロパティとメソッドを継承する別のオブジェクトを参照します。オブジェクトのプロトタイプには、__proto__ プロパティ (ほとんどのブラウザー) または Object.getPrototypeOf() を使用してアクセスできます。

たとえば、新しいオブジェクトを作成すると、そのコンストラクターのプロトタイプ オブジェクトからプロパティとメソッドが継承されます。

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

2. プロトタイプチェーン

JavaScript では、オブジェクトはプロトタイプ チェーンでリンクされます。オブジェクトでプロパティまたはメソッドが呼び出されるとき、JavaScript はまずそのプロパティまたはメソッドがオブジェクト自体に存在するかどうかを確認します。そうでない場合、JavaScript はオブジェクトのプロトタイプをチェックします。そこに見つからない場合、JavaScript はルート プロトタイプ オブジェクトである Object.prototype に到達するまで、プロトタイプのチェーンをチェックアップし続けます。それでもプロパティまたはメソッドが見つからない場合は、unknown が返されます。

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

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

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

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

3. プロトタイプへのメソッドの追加

コンストラクター関数のプロトタイプにメソッドを追加すると、そのコンストラクターによって作成されたすべてのインスタンスがメソッドにアクセスできるようになります。これは、共有メソッドを各インスタンスに直接追加するよりも、より効率的に共有メソッドを定義する方法です。

function Car(make, model) {
    this.make = make;
    this.model = model;
}

// Adding a method to the prototype
Car.prototype.displayInfo = function() {
    console.log(this.make + " " + this.model);
};

const car1 = new Car("Toyota", "Corolla");
car1.displayInfo();  // Output: "Toyota Corolla"

4. コンストラクターとプロトタイプの関係

プロトタイプ オブジェクトはコンストラクター関数と密接に関係しています。 new キーワードを使用してオブジェクトのインスタンスを作成すると、JavaScript はそのインスタンスの [[Prototype]] をコンストラクター関数のプロトタイプに設定します。

function Student(name, grade) {
    this.name = name;
    this.grade = grade;
}

Student.prototype.study = function() {
    console.log(this.name + " is studying.");
};

const student1 = new Student("Alice", "A");
console.log(student1.__proto__ === Student.prototype);  // true

5. プロトタイプの継承

プロトタイプの継承により、あるオブジェクトが別のオブジェクトからプロパティとメソッドを継承できます。これは、JavaScript におけるオブジェクト指向継承の形式です。オブジェクトのプロトタイプを別のオブジェクトのプロトタイプに設定すると、最初のオブジェクトは 2 番目のオブジェクトのプロパティとメソッドにアクセスできます。

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

// Adding a method to the prototype of Person
Person.prototype.greet = function() {
    console.log("Hello, " + this.name);
};

const person1 = new Person("John", 30);
person1.greet();  // Output: "Hello, John"

6. Object.getPrototypeOf() および Object.setPrototypeOf()

JavaScript は、オブジェクトのプロトタイプを取得および変更するための Object.getPrototypeOf() メソッドと Object.setPrototypeOf() メソッドを提供します。ただし、実行時にプロトタイプを変更することは、パフォーマンスに影響を与える可能性があるため、推奨されません。

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

Animal.prototype.speak = function() {
    console.log(this.name + " makes a noise.");
};

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

Dog.prototype = Object.create(Animal.prototype);  // Set the prototype chain
Dog.prototype.constructor = Dog;  // Fix the constructor reference

const dog1 = new Dog("Buddy");
dog1.speak();  // Output: "Buddy makes a noise."

7. プロトタイプとパフォーマンス

プロトタイプはメソッドとプロパティを共有する効率的な方法を提供しますが、作成後にオブジェクトのプロトタイプを変更するとパフォーマンスに問題が生じる可能性があります。実行時に変更を必要としない方法でプロトタイプをセットアップすることがベスト プラクティスです。

8. 要点のまとめ

• すべてのオブジェクトにはプロトタイプがあります。このプロトタイプにもプロトタイプがあり、プロトタイプ チェーンを形成する場合があります。
• プロトタイプは、オブジェクトがプロパティとメソッドを継承する共有オブジェクトです。
• コンストラクター関数のプロトタイプで共有メソッドを定義できます。
• JavaScript における 継承 は、オブジェクトのプロトタイプを別のオブジェクトのプロトタイプにリンクすることによって実現されます。
• Object.getPrototypeOf() と Object.setPrototypeOf() を使用すると、オブジェクトのプロトタイプを操作できます。

結論

プロトタイプは、効率的な継承とメソッド共有を可能にする JavaScript の強力な機能です。より効率的でオブジェクト指向の JavaScript コードを作成するには、それらがどのように機能するかを理解することが重要です。

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

以上がJavaScript プロトタイプを理解する: 継承とメソッド共有の包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。