プロトタイプとプロトタイプチェーンの特性と用途を理解する

プロトタイプとプロトタイプ チェーンの特性と応用を調べる

1. プロトタイプとプロトタイプ チェーンとは

JavaScript では、すべてのオブジェクトにプロトタイプがあります。物体。プロトタイプ オブジェクトもオブジェクトであり、プロパティとメソッドを持つことができます。 JavaScript のオブジェクトはプロトタイプベースです。これは、あるオブジェクトが別のオブジェクトのプロパティとメソッドを継承できることを意味します。

オブジェクトのプロトタイプ オブジェクトには、__proto__ 属性を通じてアクセスできます。この __proto__ 属性は、オブジェクトのプロトタイプ オブジェクトを指します。これは、プロトタイプ オブジェクトへの参照です。プロトタイプ チェーンを通じて、オブジェクトはプロトタイプ チェーンに沿ってプロパティとメソッドを検索できます。

2. プロトタイプの特徴

1. オブジェクトのプロトタイプ オブジェクトは共有されます。 JavaScript では、新しいオブジェクトを作成すると、そのオブジェクトは自動的にプロトタイプ オブジェクトに関連付けられます。複数のオブジェクトを同じプロトタイプ オブジェクトに関連付けることができるため、プロトタイプ オブジェクト内のプロパティとメソッドを共有できます。

コード例:

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

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

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

console.log(person1.__proto__ === person2.__proto__);  // true

2. オブジェクトは、プロトタイプ オブジェクトのプロパティとメソッドを使用できます。オブジェクトのプロパティにアクセスするとき、またはオブジェクトのメソッドを呼び出すとき、オブジェクト自体にこのプロパティやメソッドがない場合は、プロトタイプ チェーンに沿って検索されます。

コード例:

person1.greet();  // Hello, Alice!

console.log(person1.hasOwnProperty('name'));  // true，对象自身有name属性
console.log(person1.hasOwnProperty('greet'));  // false，对象自身没有greet方法

console.log(person1.__proto__.hasOwnProperty('greet'));  // true，原型对象有greet方法

person1.name = 'Eve';

console.log(person1.hasOwnProperty('name'));  // true，对象自身有name属性，不会修改原型对象的属性

3. プロトタイプ チェーンの特徴

1. プロトタイプ チェーンはオブジェクト間の関係です。プロトタイプ チェーンを通じて、オブジェクトはプロトタイプ チェーンの最上位を見つけるか到達するまで、レベルごとにプロパティとメソッドを検索できます。
2. プロトタイプのチェーンは直線的です。プロトタイプ チェーンでは、各オブジェクトには、その親オブジェクトであるプロトタイプが 1 つだけあります。

コード例:

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

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

console.log(cat instanceof Cat);  // true
console.log(cat instanceof Animal);  // true

console.log(cat.hasOwnProperty('name'));  // true，对象自身有name属性
console.log(cat.hasOwnProperty('color'));  // true，对象自身有color属性

console.log(cat.__proto__ === Cat.prototype);  // true
console.log(Cat.prototype.__proto__ === Animal.prototype);  // true
console.log(Animal.prototype.__proto__ === Object.prototype);  // true，原型链的顶端是Object.prototype

4. プロトタイプとプロトタイプ チェーンの適用

1. 継承: プロトタイプ チェーンを通じて、オブジェクト間の継承関係を次のようにすることができます。気がついた 。子オブジェクトのプロトタイプ オブジェクトは親オブジェクトを指すため、子オブジェクトは親オブジェクトのプロパティとメソッドを継承できます。

コード例:

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

Animal.prototype.eat = function() {
  console.log(this.name + ' is eating.');
};

function Cat(name, color) {
  this.name = name;
  this.color = color;
}

Cat.prototype = new Animal();

var cat = new Cat('Tom', 'blue');

cat.eat();  // Tom is eating.

2. プロパティとメソッドの共有: プロトタイプ オブジェクトを通じて、複数のオブジェクト間でプロパティとメソッドの共有を実現できます。これにより、特に複数のインスタンスが同じプロパティとメソッドを共有する必要がある場合に、メモリ領域が節約されます。

コード例:

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

Person.prototype.sayHi = function() {
  console.log('Hi, I am ' + this.name);
};

var person1 = new Person('Alice', 20);
var person2 = new Person('Bob', 25);

person1.sayHi();  // Hi, I am Alice
person2.sayHi();  // Hi, I am Bob

概要:

プロトタイプとプロトタイプ チェーンは JavaScript の重要な概念であり、オブジェクト間の継承と共有のメカニズムを形成します。プロトタイプとプロトタイプ チェーンを通じて、オブジェクトのプロパティとメソッドをより適切に整理および管理し、コードの再利用性と保守性を向上させることができます。実際の開発では、プロトタイプとプロトタイプ チェーンの特性と応用を深く理解し、使いこなすことが JavaScript プログラミング スキルの向上に役立ちます。

以上がプロトタイプとプロトタイプチェーンの特性と用途を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。