JavaScript のプロトタイプを理解する: 継承のバックボーン-jsチュートリアル-php.cn

JavaScript のプロトタイプを理解する: 継承のバックボーン

Mary-Kate Olsen

リリース： 2024-09-23 06:20:32

オリジナル

226 人が閲覧しました

Understanding Prototypes in JavaScript: The Backbone of Inheritance

JavaScript はプロトタイプの継承を使用する強力な言語ですが、クラスベースの言語から来た人にとっては少し混乱する可能性があります。この投稿では、JavaScript でプロトタイプがどのように機能するか、継承におけるプロトタイプの役割、およびプロトタイプを効果的に利用する方法について説明します。

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

JavaScript では、すべてのオブジェクトにプロトタイプと呼ばれるプロパティがあります。このプロパティにより、オブジェクトは他のオブジェクトからプロパティとメソッドを継承できるようになり、JavaScript の柔軟性の鍵となる継承形式が可能になります。

プロトタイプチェーン

オブジェクトのプロパティにアクセスしようとして、そのオブジェクト自体にそのプロパティが存在しない場合、JavaScript はプロトタイプチェーンを検索してプロパティを見つけます。このチェーンは、最後 (null ) に到達するまで続きます。

クラスを使用しないオブジェクトの作成

JavaScript では、コンストラクター関数を使用してオブジェクトを作成できます。仕組みは次のとおりです:

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

// Adding methods via prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// Creating an instance
const person1 = new Person('Srishti', 25);
person1.greet(); // Output: Hello, my name is Srishti

ログイン後にコピー

この例では、greet メソッドは person プロトタイプの一部であり、各インスタンスで定義されなくても、person のすべてのインスタンスがそれにアクセスできるようになります。

ES6 クラス: 最新のアプローチ

ES6 の導入により、JavaScript はクラスをサポートするようになり、オブジェクトの作成と継承の管理が容易になりました。クラス構文を使用した同様の例を次に示します。

// Class declaration
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// Creating an instance
const person1 = new Person('Srishti', 25);
person1.greet(); // Output: Hello, my name is Srishti

ログイン後にコピー