JavaScriptでプロトタイプチェーンを設定する方法

JavaScript はプロトタイプベースのプログラミング言語です。 JavaScript では、各オブジェクトにプロトタイプ オブジェクトがあり、JavaScript プロトタイプ チェーン メカニズムを通じて親オブジェクトのプロパティとメソッドにアクセスして継承することで、コードの再利用と最適化を実現します。

以下はJavaScriptでのプロトタイプチェーンの設定に関する記事で、JavaScriptのプロトタイプチェーンとは何か、プロトタイプオブジェクトの作成方法、インスタンスオブジェクトの作成方法を中心に紹介しています。

1. JavaScript プロトタイプ チェーン

JavaScript プロトタイプ チェーンとは、各オブジェクトがプロパティとメソッドを含むプロトタイプ オブジェクト (プロトタイプ) を持つことを意味します。オブジェクトのプロパティやメソッドにアクセスするとき、JavaScript はまずそのプロパティやメソッドがオブジェクト自体に存在するかどうかを確認し、存在しない場合は、プロパティやメソッドが見つかるまでオブジェクトのプロトタイプ チェーンを検索します。プロパティまたはメソッドがプロトタイプ チェーン全体で見つからない場合は、未定義が返されます。

JavaScript のプロトタイプ チェーン メカニズムを使用してオブジェクトのプロパティとメソッドを共有することで、コードの再利用と最適化を実現できます。通常、継承機能を実装するときは、コード再利用の効果を実現するために、プロトタイプ チェーン メカニズムを使用して親オブジェクトのプロパティとメソッドを継承します。

2. プロトタイプ オブジェクトの作成

JavaScript では、コンストラクターまたはオブジェクト リテラルを通じてプロトタイプ オブジェクトを作成できます。コンストラクターのプロトタイプ オブジェクトには、prototype 属性を通じてアクセスし、設定できます。オブジェクト リテラルのプロトタイプ オブジェクトは、__proto__ 属性を通じてアクセスおよび設定できます。

1. コンストラクターを使用してプロトタイプ オブジェクトを作成する

サンプル コードは次のとおりです:

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

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

上の例では、Person コンストラクターを定義し、プロトタイプを使用します。属性をプロトタイプオブジェクトに追加します。

コンストラクターを使用して作成されたプロトタイプ オブジェクトは、インスタンス オブジェクトによって共有されるため、インスタンス オブジェクトを作成することで、プロトタイプ オブジェクトのプロパティやメソッドにアクセスして呼び出すことができます。

サンプル コードは次のとおりです。

var person = new Person('Jack', 20);
person.sayHello(); // 输出：Hello, Jack

上記のサンプル コードでは、まず Person コンストラクターを使用して person オブジェクトのインスタンスを作成し、次に、sayHello メソッドを呼び出して挨拶を出力します。

2. オブジェクト リテラルを使用してプロトタイプ オブジェクトを作成する

サンプル コードは次のとおりです:

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

上記のサンプル コードでは、オブジェクト リテラルを使用して人物オブジェクトを作成しますこれには、name、age、sayHello のプロパティとメソッドが含まれます。さらに、オブジェクト リテラルでは、__proto__ 属性を使用して、そのプロトタイプ オブジェクトにアクセスし、設定することができます。

サンプル コードは次のとおりです:

var person1 = {
  name: 'Jack',
  age: 20,
};

var person2 = {
  name: 'Lucy',
  age: 18,
};

person1.__proto__ = person;
person2.__proto__ = person;

person1.sayHello(); // 输出：Hello, Jack
person2.sayHello(); // 输出：Hello, Lucy

上記のサンプル コードでは、最初に person1 と person2 の 2 つのインスタンス オブジェクトを作成し、次に __proto__ 属性を通じてそれらのプロトタイプ オブジェクトを上記にポイントしました。定義された person オブジェクトは、sayHello メソッドの共有を実現しており、インスタンス オブジェクト内でメソッドに直接アクセスして呼び出すことができます。

3. インスタンス オブジェクトの作成

JavaScript では、コンストラクターまたはオブジェクト リテラルを通じてインスタンス オブジェクトを作成できます。コンストラクターがインスタンス オブジェクトを作成する場合、new キーワードを使用すると、コンストラクターが自動的に呼び出され、新しいインスタンス オブジェクトが返されます。オブジェクト リテラルはインスタンス オブジェクトを直接作成します。

1. コンストラクターを使用してインスタンス オブジェクトを作成する

サンプル コードは次のとおりです:

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

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

var person = new Person('Jack', 20);
person.sayHello(); // 输出：Hello, Jack

上記のサンプル コードでは、最初に Person コンストラクターを定義し、プロトタイプ オブジェクトには、sayHello メソッドが追加されます。次に、 new キーワードを使用して Person コンストラクターを呼び出し、person オブジェクトのインスタンスを作成し、sayHello メソッドを呼び出して挨拶を出力します。

2. オブジェクト リテラルを使用してインスタンス オブジェクトを作成する

サンプル コードは次のとおりです:

var person = {
  name: '',
  age: '',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

var person1 = Object.create(person);
person1.name = 'Jack';
person1.age = 20;
person1.sayHello(); // 输出：Hello, Jack

var person2 = Object.create(person);
person2.name = 'Lucy';
person2.age = 18;
person2.sayHello(); // 输出：Hello, Lucy

上記のサンプル コードでは、最初にオブジェクト リテラルを使用して person オブジェクトを作成します次に、Object.create メソッドを使用して 2 つのインスタンス オブジェクト person1 と person2 を作成し、それらのプロトタイプ オブジェクトを person オブジェクトとして指定します。最後に、person1 オブジェクトと person2 オブジェクトにそれぞれ name 属性と age 属性を設定し、sayHello メソッドを呼び出して挨拶を出力します。

以上がJavaScriptでプロトタイプチェーンを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。