JavaScriptでのクラス継承とプロトタイプ継承の違い – JavaScriptで始めるプログラミング

クラス継承について

クラス継承は、ES6以降に導入された機能で、従来のプロトタイプ継承に代わるものとして広く利用されています。以下に、クラス継承の基本的な使い方を示します。

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

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

class ChildClass extends ParentClass {
  constructor(name, age) {
    super(name);
    this.age = age;
  }

  displayAge() {
    console.log(`I am ${this.age} years old.`);
  }
}

const child = new ChildClass('Taro', 10);
child.greet(); // Hello, my name is Taro.
child.displayAge(); // I am 10 years old.

この例では、ChildClassがParentClassを継承しており、super()を使用して親クラスのコンストラクターを呼び出しています。

プロトタイプ継承について

プロトタイプ継承はJavaScriptの伝統的な継承方法です。オブジェクトはプロトタイプチェーンを通じて他のオブジェクトからプロパティやメソッドを継承します。以下に、プロトタイプ継承の基本的な使い方を示します。

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

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

function ChildClass(name, age) {
  ParentClass.call(this, name);
  this.age = age;
}

ChildClass.prototype = Object.create(ParentClass.prototype);
ChildClass.prototype.constructor = ChildClass;

ChildClass.prototype.displayAge = function() {
  console.log(`I am ${this.age} years old.`);
};

const child = new ChildClass('Taro', 10);
child.greet(); // Hello, my name is Taro.
child.displayAge(); // I am 10 years old.

この例では、ChildClassがParentClassのプロトタイプを基に作られています。ParentClass.call(this, name);を使用して親クラスのコンストラクターを呼び出しています。

クラス継承とプロトタイプ継承の違い

• 構文の違い: クラス継承はES6のclassキーワードを使用しますが、プロトタイプ継承は関数コンストラクターとprototypeプロパティを使用します。
• 可読性: クラス継承はモダンな構文であり、より読みやすいコードを書くことができます。プロトタイプ継承はより冗長になります。
• 機能: クラス継承ではsuper()を使って親クラスのコンストラクターやメソッドを呼び出すことができます。しかし、プロトタイプ継承では呼び出し方法が異なります。

まとめ

JavaScriptでのプログラミングを始める際には、これら二つの継承方法を理解することが不可欠です。MDN Web Docs(外部リンク)などのリソースを利用してさらに学びましょう。