JavaScript の継承とは何かを 3 分で理解する

実際、JavaScript における継承とは、オブジェクト (子オブジェクト) が別のオブジェクト (親オブジェクト) のプロパティとメソッドを取得できるようにするメカニズムを指します。このようにして、子オブジェクトは親オブジェクトのコードを再利用できると同時に、独自の特定の機能を追加できます。

JavaScript はプロトタイプの継承を使用して、オブジェクト間の継承関係を実装します。

まず最初に、いくつかの基本概念を知っておく必要があります。

オブジェクト: JavaScript では、配列、関数、日付など、ほとんどすべてがオブジェクトです。すべてのオブジェクトにはプロパティとメソッドがあります。
コンストラクター:コンストラクターは、オブジェクトの作成に使用される特別な関数です。これらは通常大文字で始まり、同様のプロパティとメソッドを持つオブジェクトを作成するために使用されます。
プロトタイプ:すべての JavaScript オブジェクトにはプロトタイプがあります。プロトタイプは、そのオブジェクトによって共有されるプロパティとメソッドを含むオブジェクトです。オブジェクトのプロパティまたはメソッドにアクセスすると、JavaScript エンジンはまずオブジェクト自体でそれを検索し、見つからない場合はプロトタイプで検索します。

JavaScript の継承メカニズムをよりよく理解するために、簡単な例を示します。

// 定义一个构造函数
function Animal(name) {
  this.name = name;
}

// 在原型上定义一个方法
Animal.prototype.sayName = function() {
  console.log("My name is " + this.name);
};

// 创建一个Animal对象
var animal = new Animal("Tom");
animal.sayName(); // 输出: My name is Tom

上の例では、Animal というコンストラクターを定義しました。new Animal("Tom")Animal オブジェクトはを使用して作成され、というname名前のプロパティとsayNameという名前のメソッドがあります。sayNameこのメソッドをに追加して、Animal.prototypeAnimal コンストラクターを通じて作成されたすべてのオブジェクトがこのメソッドにアクセスできるようにします。

継承の概念について話しましょう。JavaScript では、継承を使用してprototype継承関係を実現できます。

// 定义一个子构造函数
function Dog(name, breed) {
  Animal.call(this, name); // 调用父构造函数
  this.breed = breed;
}

// 创建一个原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 在子构造函数上定义一个方法
Dog.prototype.bark = function() {
  console.log("Woof!");
};

// 创建一个Dog对象
var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!

この例では、Dog という名前のサブコンストラクターを定義します。callメソッドを使用して子コンストラクター内で親コンストラクターを呼び出し、子Animalオブジェクトにもnameプロパティがあることを確認しました。次に、Object.createメソッドがとなるAnimal.prototypeプロトタイプを使用しDog.prototype、プロトタイプチェーンを確立します。これは、Dog.prototype継承されたAnimal.prototypeプロパティとメソッドを意味します。

次に、コンストラクター参照が正しいことを確認するためにDog.prototype.constructorを設定します。Dogこれは、プロトタイプチェーンが作成されたときににDog.prototype.constructor設定されておりAnimal、それをに復元する必要があるためですDog。

最後に、子オブジェクトに固有のDog.prototype新しいメソッドを子コンストラクターに定義します。bark

Dogこれで、オブジェクトを作成しdog、オブジェクトが継承するメソッドとオブジェクト自体が定義するAnimalメソッドを呼び出すことができます。sayNameDogbark

プロトタイプチェーンを通じて、DogオブジェクトはAnimalオブジェクトのプロパティとメソッドを継承し、独自の特定の関数を追加することもできます。

プロトタイプの継承はオブジェクトに基づいていることに注意してください。これは、プロトタイプオブジェクトを変更すると、そのプロトタイプを継承するすべてのオブジェクトも影響を受けることを意味します。

プロトタイプの継承に加えて、ES6 (ECMAScript 2015) ではクラスと継承の概念も導入されており、JavaScript での継承が理解しやすく、使いやすくなっています。

class Animal {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log("My name is " + this.name);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log("Woof!");
  }
}

var dog = new Dog("Max", "Labrador");
dog.sayName(); // 输出: My name is Max
dog.bark(); // 输出: Woof!

ES6 で導入されたキーワードによりclass、クラスの定義と継承が簡素化されます。上記の例では、AnimalクラスとDogクラスを定義し、extendsキーワードによる継承関係を実装しました。superキーワードは、親クラスのコンストラクターを呼び出すために使用されます。

JavaScript の継承メカニズムは、プロトタイプチェーンを使用してオブジェクト間の継承関係を実現します。継承を通じて、子オブジェクトは親オブジェクトのプロパティとメソッドを取得し、独自の特定の機能を追加できます。プロトタイプの継承はオブジェクトベースであり、プロトタイプオブジェクトを変更すると、そのプロトタイプを継承するすべてのオブジェクトが影響を受けます。ES6 で導入されたクラスと継承の構文により、JavaScript での継承が理解しやすくなり、使用しやすくなります。

初心者からフロントエンド JavaScript の習得まで、JavaScript コアの高度な ES6 構文、API、高度な JS などに関する基礎知識と実践的なチュートリアルを含む、ダークホースプログラマー向けの完全なビデオチュートリアルセットです。

JavaScript の継承とは何かを 3 分で理解する

おすすめ