JavaScript におけるプロトタイプの継承と ESlasses を理解する

JavaScript には、ほとんどの従来の OOP 言語とは異なる継承メカニズムがあります。プロトタイプが主な焦点ですが、ES6 クラスはより現代的な方法を提供します。 ES6 クラスがどのように可読性と有用性を向上させるか、またプロトタイプ継承がどのように動作するかを調べてみましょう。

1. プロトタイプ: 継承の基礎

JavaScript のすべてのオブジェクトには、プロトタイプと呼ばれる別のオブジェクトへの内部リンクがあります。このプロトタイプ オブジェクトは独自のプロトタイプを持つことができ、チェーンを形成します。

例:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

説明:

ここでは、ウサギは動物から食事を継承します。これは、オブジェクトが継承を通じてどのようにプロパティを共有できるかを示しています。

2. コンストラクター関数: オブジェクトの構築

ES6 クラスが登場する前は、JavaScript はコンストラクター関数を使用してオブジェクトを作成し、そのプロパティを初期化していました。

例:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

説明:

Animal コンストラクターは名前を初期化します。 Eats プロパティは Animal.prototype を通じて追加され、継承が有効になります。

3. マスターオブジェクト: 共通の祖先

マスター オブジェクトは、他のオブジェクトのプロトタイプとして機能します。

例:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

説明:

masterObject は共通の祖先であり、 specificObject は名前を追加する際にその type プロパティを継承します。

4. プロトタイプ チェーン: 階層の追跡

JavaScript はプロトタイプ チェーンを検索してプロパティとメソッドを見つけます。

例:

const grandparent = { role: 'grandparent' };
const parent = Object.create(grandparent);
parent.role = 'parent';

const child = Object.create(parent);
console.log(child.role); // parent

説明:

子オブジェクトはロールを探します。親の役割を見つけて、プロトタイプ チェーンがプロパティの検索をどのように解決するかを示します。

5. プロトタイプの継承: 共有方法

オブジェクトはプロトタイプの継承を通じてメソッドを共有できます。

例:

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

function Dog(name) {
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  console.log(this.name + ' barks.');
};

const dog = new Dog('Rex');
dog.speak(); // Rex makes a noise.
dog.bark();  // Rex barks.

説明:

Dog は Animal から継承し、Speak にアクセスできるようにします。また、独自の bark メソッドも定義しています。

6. ES6 クラス: よりクリーンな構文

ES6 では、クラスを作成するためのよりクリーンで直感的な方法が導入されました。

例:

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

説明:

このクラスベースの構文により、オブジェクトの作成と継承が簡素化され、コードが読みやすくなります。

7. ゲッターとセッター: プロパティの管理

ES6 では、オブジェクトのプロパティに動的にアクセスしたり変更したりするメソッドを定義できます。

例:

const animal = { eats: true };
const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true (inherited)
console.log(rabbit.hops); // true (own property)

説明:

area はゲッターとセッターを使用して計算されたプロパティであり、動的更新が可能です。

8. 静的メソッド: クラスレベルのユーティリティ

静的メソッドはインスタンスではなくクラス自体に属します。

例:

function Animal(name) {
  this.name = name;
}
Animal.prototype.eats = true;

const dog = new Animal('Dog');
console.log(dog.name); // Dog
console.log(dog.eats); // true

説明:

add は MathHelper 上で直接アクセスできる静的メソッドであり、ユーティリティ関数に役立ちます。

9. ポリモーフィズム: メソッドのオーバーライド

ポリモーフィズムにより、サブクラスは親クラスのメソッドを再定義できます。

例:

const masterObject = { type: 'Generic' };
const specificObject = Object.create(masterObject);
specificObject.name = 'Specific';

console.log(specificObject.type); // Generic (inherited)
console.log(specificObject.name); // Specific (own property)

説明:

Dog オーバーライドは Animal から発言し、独自の実装を提供します。

結論

JavaScript オブジェクト指向プログラミングの基礎は、ES6 クラスとプロトタイプの継承で構成されます。コンストラクター関数、プロトタイプ、ES6 クラスの使用方法を知ることで、再利用可能で保守可能なコードの作成が向上します。 JavaScript の継承パラダイムを最大限に活用するには、次のアイデアを取り入れてください!

Github Linkedin でフォローしてください

以上がJavaScript におけるプロトタイプの継承と ESlasses を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。