【初心者向け】JavaScriptの継承とは？使い方を解説！

こんにちは、ライターのまなたけです。

この記事ではJavaScriptプログラミングでよく使用される「継承」について、使い方やサンプルプログラムを紹介します。

オブジェクト指向プログラミングを学習する中で、よく見かける「継承」という文字。JavaScriptにも「継承」の概念が組み込まれています。

しかし、JavaScriptプログラミングを学び始めた方の中には、「継承」の使い方やプログラミング方法がよく分からないという方も多いのではないでしょうか？

この記事を読んで、JavaScriptの継承について理解を深めていきましょう。

1 JavaScript「継承」とは？
2 JavaScript「継承」の方法
3 まとめ

JavaScript「継承」とは？

まずは「継承」の概念について説明をします。

継承はオブジェクト指向プログラミングでは重要な概念の1つです。

継承とは、あるクラスから継承して別のクラスを作成することを指します。

オブジェクト指向の場合、継承元となるクラスを「スーパークラス（親クラス）」、継承して作成した新たなクラスを「サブクラス（子クラス）」といいます。

「継承」を使うメリットは、同じような機能をひとまとめのクラスにすることで、重複したコードを書かずに済むからです。これによってコーディング量が減り、読みやすいコードを書くことができます。

JavaScriptも同様に、「継承」を使うことで、親クラスから引き継いだ子クラスを新たに作成することができます。

JavaScript「継承」の方法

ここでは、JavaScriptの継承の方法を紹介します。

prototypeプロパティを使った継承

ま図はprototypeを使った継承の方法です。

prototypeの記述方法は以下の通りです。

Object.prototype.method= function() { }

1	Object.prototype.method= function() { }

以下にサンプルコードを用いて説明します。

var shain = function(setName) { 
  this.name = setName;
}

shain.prototype.introduction = function() {
  //名前を一緒に出力する
  console.log('私の名前は、'+this.name+'です！');
}

//名前を「鈴木一郎」にする 
var ichiro = new shain('鈴木一郎');

ichiro.introduction();

var shain = function(setName) {

this.name = setName;

}

shain.prototype.introduction = function() {

//名前を一緒に出力する

console.log('私の名前は、'+this.name+'です！');

}

//名前を「鈴木一郎」にする

var ichiro = new shain('鈴木一郎');

ichiro.introduction();

実行結果は以下の通りです。

実行結果を見ると、「shain」オブジェクトを継承して新たに「ichiro」オブジェクトが新たに生成されていることが分かります。

callメソッドを使った継承

次に紹介するのはcallメソッドを使った継承です。

まずは以下のサンプルコードを実行します。

var shain = function(name) {
  name = name;
}
 
shain.prototype.introduction = function() {
    console.log('私の名前は' + this.name + 'です！');
}
 
var shain1 = function() {}
 
//Humanオブジェクトの機能を引き継ぐ
shain1.prototype = new shain();
 
var ichiro = new shain1('鈴木一郎');
 
ichiro.introduction();

var shain = function(name) {

name = name;

}

shain.prototype.introduction = function() {

console.log('私の名前は' + this.name + 'です！');

}

var shain1 = function() {}

//Humanオブジェクトの機能を引き継ぐ

shain1.prototype = new shain();

var ichiro = new shain1('鈴木一郎');

ichiro.introduction();

実行結果は以下の通りです。

実行結果を見ると、先の例で「鈴木一郎」と表示されていたのが、「undefined」となってしまいました。

これは、上記のサンプルコードの方法では、継承元の初期値は引き継ぎません。このため、undefinedと表示されたのです。

この場合、以下のようにcallメソッドを使用することで、継承元の初期値を引き継ぐことができます。

var shain = function(name) {
  this.name = name;
}
 
shain.prototype.introduction = function() {
    console.log('私の名前は' + this.name + 'です！');
}
 
var shain1 = function(name) {
  shain.call(this, name)
}
 
//Humanオブジェクトの機能を引き継ぐ
shain1.prototype = new shain();
 
var ichiro = new shain1('鈴木一郎');
 
ichiro.introduction();

var shain = function(name) {

this.name = name;

}

shain.prototype.introduction = function() {

console.log('私の名前は' + this.name + 'です！');

}

var shain1 = function(name) {

shain.call(this, name)

}

//Humanオブジェクトの機能を引き継ぐ

shain1.prototype = new shain();

var ichiro = new shain1('鈴木一郎');

ichiro.introduction();

実行結果は以下の通りです。

上記の通り、継承元の初期値を引き継ぎ、パラメタとして指定した氏名が表示されました。

callメソッドの第1パラメタには「this」を指定します。このthisは、コンストラクタで指定したthisを参照します。第2パラメタには文字列を受け取るための変数を指定します。

そして、prototypeプロパティを使用してshainとshain1の両方を引き継いだ新たなオブジェクト「ichiro」を生成しています。

Object.createメソッドを使った継承

次に紹介するのは「Object.create」メソッドを使った方法です。

Object.createは、既存オブジェクトのプロトタイプを使用して、新たなオブジェクトを生成するメソッドです。

「callメソッドを使った継承」で使用したサンプルコードを、Object.createを使って書き換えると以下のようになります。

var shain = function(name) {
  this.name = name;
}
 
shain.prototype.introduction = function() {
    console.log('私の名前は' + this.name + 'です！');
}
 
var shain1 = function(name) {
  shain.call(this, name)
}
 
//Humanオブジェクトの機能を引き継ぐ
shain1.prototype = Object.create(shain.prototype);
 
var ichiro = new shain1('鈴木一郎');
 
ichiro.introduction();

var shain = function(name) {

this.name = name;

}

shain.prototype.introduction = function() {

console.log('私の名前は' + this.name + 'です！');

}

var shain1 = function(name) {

shain.call(this, name)

}

//Humanオブジェクトの機能を引き継ぐ

shain1.prototype = Object.create(shain.prototype);

var ichiro = new shain1('鈴木一郎');

ichiro.introduction();

実行結果は以下の通りです。

上記の例では、「new shain()」を「Object.create(shain.prototype)」に置き換えています。

この例からも分かるように、Object.createを使ってshainコンストラクタの機能を引き継ぎ、shain1オブジェクトを生成することができます。

extendsを使った継承

クラスを継承する場合は「extends」を使って行います。

まずは以下のサンプルコードをご覧ください。

class shain1 {
  shainName1() {
    return "鈴木一郎";
  }
}
class shain2 extends shain1 {
  shainName2() {
    return "佐藤二朗";
  }
}

let shain = new shain2();
console.log(shain.shainName1()); //鈴木一郎
console.log(shain.shainName2()); //佐藤二朗

class shain1 {

shainName1() {

return "鈴木一郎";

}

class shain2 extends shain1 {

shainName2() {

return "佐藤二朗";

}

let shain = new shain2();

console.log(shain.shainName1()); //鈴木一郎

console.log(shain.shainName2()); //佐藤二朗

実行結果は以下の通りです。

この例では「shain1」クラスをextendsを使って「shain2」クラスに継承しています。

そして、「shain1」「shain2」を継承した「shain」オブジェクトで、「shainName1」「shainName2」メソッドを用いてconsole.logで出力しています。

ここのポイントは「継承したクラスは再実装することなく、親クラスの機能を使用できる」という点です。

superを使った継承

親クラスのコンストラクタやメソッドを実行する場合には「super」を使用します。

ここでは親クラスのコンストラクタを用いて実行するサンプルコードを紹介します。

  constructor(n){
    this.shainName = n;
  }
}
class shain2 extends shain1 {
  constructor(n) {
    super(n);
  }
}

let ichiro = new shain2('鈴木一郎');
let jiro = new shain2('佐藤二朗');
console.log(ichiro.shainName); //鈴木一郎
console.log(jiro.shainName); //佐藤二朗

constructor(n){

this.shainName = n;

}

class shain2 extends shain1 {

constructor(n) {

super(n);

}

let ichiro = new shain2('鈴木一郎');

let jiro = new shain2('佐藤二朗');

console.log(ichiro.shainName); //鈴木一郎

console.log(jiro.shainName); //佐藤二朗

実行結果は以下の通りです。

この例では、親クラス「shain1」を引き継いだ「shain2」のコンストラクタ内に「super(n)」を記述しています。

これによって、superで親クラスのコンストラクタを実行します。

まとめ

いかがでしたでしょうか？

今回は、JavaScripの「継承」について説明しました。

「継承」はJavaScriptプログラミングを行う上で、重要な概念の1つです。まとめると、以下のようになります。

「継承」とは、別のオブジェクトの機能を引き継いで使用すること
JavaScriptの継承には、「prototype」「call」「Object.create」を使った方法がある
classの継承では「extends」「Super」を使って行う

この記事で紹介した使い方を参考にしながら、JavaScriptの継承の理解に役立つと嬉しいです。

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。