【初心者必見】JavaScriptでextendsを使いクラスの継承方法

2020年10月28日JavaScript

javascript

こんにちは、カミ@god48_です。

プログラミングでは「クラスの継承」があります。
クラスの継承とは、親クラスの変数やメソッドを子クラスで使うことを継承と言います。
継承することで、プログラムを簡潔に書く方法の一つです。

入門者は「クラスの継承」を必ず抑えるポイントなので、必ず覚えましょう。
実際にどのようにしてクラスの継承をするのか、変数やメソッドを使うのかを見ていきましょう。

クラスの継承方法

クラスの継承方法を見ていきましょう

 
//基本のクラス
class Parent {
　　example1() {
　　　　console.log("example1です");
  }
}
  
// クラスの継承
class Child extends Parent {
　　example2() {
　　　　console.log("example2です");
  }
}
　　
var sample = new Child();
sample.extends1();  // => example1です
sample.extends2();  // => example2です
  • クラスを継承するときに「extends」を使用します。
  • 子クラスで、親クラスと同名のメソッドを定義すればメソッドがオーバーライドされ、 子クラスから親クラスのメソッドを呼び出せます。

コンストラクタ(constructor)を呼び出す

 
//基本のクラス
class Parent {
　　constructor(age) {
       this.age = age;
   }
}
   
// クラスの継承
class Child extends Parent {
　　constructor(name) {
        // 親クラスのコンストラクタ呼び出し
        super("30");
        this.age = name;
    }
}
  
const sample = new Child('kami');
console.log(sample.age);   // => 30
console.log(sample.name);  // => kami

小クラスのコンストラクタの中で、親クラスのコンストラクタを呼び出すには「supre()」を使います。

※super() を呼び出す際の注意ですが、「this」よりも先に呼び出す必要があります。

スポンサードサーチ

コンストラクタ(constructor)を呼びださない


 //基本のクラス
class Parent {
   constructor(age) {
       this.age = age;
   }
}
   
// クラスの継承
class Child extends Parent {
    constructor(name) {
    }
}
  
const sample = new Child(30);
console.log(sample.age);   // => 30

「supre()」を使わない場合は親クラスのコンストラクタが呼び出されます。

親クラスのメソッドの呼び出す

 
//基本のクラス
class Parent {
　　example1() {
　　　　console.log("example1です");
  }
}
   
// クラスの継承
class Child extends Parent {
　　example2() {
　　　　super.example1()
  }
}
  
const sample = new Child();
sample.example2();   // => example1です

親クラスのメソッドを呼び出せます。

以上でJavaScriptでクラスの継承のやり方の説明になります。

プログラマー転職、プログラマー副業したい方は参考にしてくださいね。

確実にエンジニアに転職したい方向け

未経験からエンジニアを目指すTechAcademy Pro（エンジニア転職保証コース）

Pythonを学びたい方向け

【PyQ】いよいよ、誰でも機械学習を学べる時代へ

カミの転職経験談

JavaScriptJavaScript

Posted by kami