JavaScript継承徹底解説！最強の7つの手法とサンプルコード

はじめに
●JavaScriptの継承とは
- ○クラスベースの継承
- ○プロトタイプベースの継承
●継承の使い方：7つの手法とサンプルコード
●注意点
まとめ

はじめに

この記事を読めば、JavaScriptの継承を理解し、実践できるようになります。

継承の基本概念から、使い方、注意点、カスタマイズ方法まで、初心者にも分かりやすい形で徹底解説していきます。

●JavaScriptの継承とは

JavaScriptの継承は、オブジェクト指向プログラミングにおいて、あるオブジェクトが他のオブジェクトのプロパティやメソッドを引き継ぐ機能です。

JavaScriptには、クラスベースの継承とプロトタイプベースの継承の2つの方法が存在します。

○クラスベースの継承

クラスベースの継承は、ES6で導入されたクラス構文を使用して継承を行います。

これは他のオブジェクト指向言語、例えばJavaやC#などと同じような概念です。

親クラス（スーパークラス）から子クラス（サブクラス）へメソッドやプロパティを引き継ぎます。

○プロトタイプベースの継承

プロトタイプベースの継承は、JavaScriptがもともと持っている継承の仕組みです。

オブジェクトが他のオブジェクトのプロトタイプオブジェクトを参照することで、プロパティやメソッドを引き継ぎます。

●継承の使い方：7つの手法とサンプルコード

下記では、JavaScriptの継承の使い方を7つの手法とサンプルコードで解説します。

○サンプルコード1：コンストラクタ関数を使った継承

コンストラクタ関数を使って、プロトタイプベースの継承を実現します。

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

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

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! Woof!');
};

const dog = new Dog('Max', 'Golden Retriever');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

○サンプルコード2：クラスを使った継承

ES6のクラス構文を使って、クラスベースの継承を実現します。

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! Woof!');
  }
}

const dog = new Dog('Max', 'Golden Retriever');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

○サンプルコード3：Object.create()を使った継承

Object.create()メソッドを使って、プロトタイプベースの継承を実現します。

const Animal = {
  init: function(name) {
    this.name = name;
  },
  sayName: function() {
    console.log('My name is ' + this.name);
  }
};

const Dog = Object.create(Animal);
Dog.initDog = function(name, breed) {
  this.init(name);
  this.breed = breed;
};
Dog.bark = function() {
  console.log('Woof! Woof!');
};

const dog = Object.create(Dog);
dog.initDog('Max', 'Golden Retriever');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

○サンプルコード4：プロトタイプチェーンを使った継承

プロトタイプチェーンを使って、プロトタイプベースの継承を実現します。

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

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

function Dog(name, breed) {
  Animal.call(this, name);
  this.breed = breed;
}

Dog.prototype = Animal.prototype;
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof! Woof!');
};

const dog = new Dog('Max', 'Golden Retriever');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

○サンプルコード5：継承とプライベート変数

JavaScriptの継承とプライベート変数を組み合わせた例です。

function Animal(name) {
  const _name = name;

  this.getName = function() {
    return _name;
  };
}

function Dog(name, breed) {
  Animal.call(this, name);
  const _breed = breed;

  this.getBreed = function() {
    return _breed;
  };
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog('Max', 'Golden Retriever');
console.log(dog.getName()); // Max
console.log(dog.getBreed()); // Golden Retriever

○サンプルコード6：ミックスインを使った継承

ミックスインを利用して、複数のオブジェクトのプロパティやメソッドを組み合わせた継承の例です。

const Animal = {
  init: function(name) {
    this.name = name;
  },
  sayName: function() {
    console.log('My name is ' + this.name);
  }
};

const BarkMixin = {
  bark: function() {
    console.log('Woof! Woof!');
  }
};

const Dog = Object.assign({}, Animal, BarkMixin);

const dog = Object.create(Dog);
dog.init('Max');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

○サンプルコード7：委譲を使った継承

委譲を利用して、他のオブジェクトのメソッドを利用する継承の例です。

const Animal = {
  init: function(name) {
    this.name = name;
  },
  sayName: function() {
    console.log('My name is ' + this.name);
  }
};

const Dog = {
  init: function(name, breed) {
    Animal.init.call(this, name);
    this.breed = breed;
  },
  bark: function() {
    console.log('Woof! Woof!');
  }
};

Object.setPrototypeOf(Dog, Animal);

const dog = Object.create(Dog);
dog.init('Max', 'Golden Retriever');
dog.sayName(); // My name is Max
dog.bark(); // Woof! Woof!

●注意点

JavaScriptの継承にはいくつか注意点があります。

プロトタイプチェーンの長さに注意

プロトタイプチェーンが長くなると、プロパティやメソッドへのアクセス速度が低下する可能性があります。
継承の階層を適切に管理してください。
メソッドのオーバーライド

サブクラスで親クラスのメソッドをオーバーライドする場合、superキーワードを使用して親クラスのメソッドを呼び出すことができます。
コンストラクタ関数の継承

コンストラクタ関数を継承する場合、call()やapply()メソッドを使って親クラスのコンストラクタを呼び出すことが必要です。