JavaScript プロトタイプ

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

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

すべての JavaScript オブジェクトには、[[Prototype]] と呼ばれる內(nèi)部プロパティがあります。このプロパティは、プロパティとメソッドを継承する別のオブジェクトを參照します。オブジェクトのプロトタイプには、__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 はまずそのプロパティまたはメソッドがオブジェクト自體に存在するかどうかを確認(rèn)します。そうでない場(chǎng)合、JavaScript はオブジェクトのプロトタイプをチェックします。そこに見(jiàn)つからない場(chǎng)合、JavaScript はルート プロトタイプ オブジェクトである Object.prototype に到達(dá)するまで、プロトタイプのチェーンをチェックアップし続けます。それでもプロパティまたはメソッドが見(jiàn)つからない場(chǎng)合は、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. プロトタイプへのメソッドの追加

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

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. コンストラクターとプロトタイプの関係

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

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 におけるオブジェクト指向継承の形式です。オブジェクトのプロトタイプを別のオブジェクトのプロトタイプに設(shè)定すると、最初のオブジェクトは 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() メソッドを提供します。ただし、実行時(shí)にプロトタイプを変更することは、パフォーマンスに影響を與える可能性があるため、推奨されません。

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. プロトタイプとパフォーマンス

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

8. 要點(diǎn)のまとめ

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

結(jié)論

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

こんにちは、アバイ?シン?カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門(mén)知識(shí)を持つフルスタック開(kāi)発者です。私はさまざまなプログラミング言語(yǔ)やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構(gòu)築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお?dú)葺Xにご連絡(luò)ください。

以上がJavaScript プロトタイプを理解する: 継承とメソッド共有の包括的なガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。