JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript入門】extendsキーワードによるクラス継承の使い方

extendsキーワードによるクラス継承

extendsキーワードは、JavaScriptにおいてクラス継承（class inheritance）を実現するために使用されます。継承によって作成された子クラスは、別のクラスが持つすべてのメソッドを受け継ぐことができます。ここでは、その基本的な使い方を簡潔に解説します。

サンプルコード

次の例では、extendsキーワードを使用して、「Company」クラスのプロパティを「Model」クラスへ継承しています。

super()メソッドは親クラスへの参照を表します。コンストラクター内でsuper()を呼び出すことは、親クラスのコンストラクターを呼び出すことと同じであり、これにより親クラスのプロパティやメソッドにアクセスできるようになります。

なお、コンストラクター内でthisを使用する前に必ずsuper()を呼び出す必要がある点に注意してください。super()より前にthisへアクセスすると、ReferenceErrorが発生します。

<html>
<body>
<p id="method"></p>
<script>
    class Company {
       constructor(branch) {
        this.name = branch;
        }
          method() {
             return this.name + " has a product that is ";
          }
       }
       class Model extends Company {
          constructor(branch, pname) {
             super(branch);
             this.model = pname;
          }
          result() {
             return this.method() + " " + this.model;
          }
       }
       mycar = new Model("Tutorialspoint", "Tutorix");
       document.getElementById("method").innerHTML = mycar.result();
</script>
</body>
</html>

実行結果

Tutorialspoint has a product that is Tutorix

コードのポイント

このコードでは、「Model」クラスのインスタンスを生成する際に「Tutorialspoint」と「Tutorix」という2つの引数を渡しています。コンストラクター内のsuper(branch)によって親クラス「Company」のnameプロパティが正しく設定され、result()メソッドの中で親クラスのmethod()メソッドを呼び出すことで、継承した機能を活用した文字列が組み立てられます。


  1. JavaScriptのgetTime()メソッドとは？使い方とサンプルコードを解説

    getTime()メソッドとはJavaScriptのgetTime()メソッドは、1970年1月1日0時0分0秒（UTC、いわゆる「エポック」）から経過した時間をミリ秒単位で返すDateオブジェクトのメソッドです。この値はUnixタイムスタンプとしても知られており、日付の比較や計算、有効期限の管理など、さまざまな場面で活用されています。以下に、getTime()メソッドを使った具体的なサンプルコードを紹介します。サンプルコード<!DOCTYPE html> <html lang="ja"> <head> <meta charset=

  2. JavaScriptのsort()メソッドとは?配列ソートの基本と比較関数の使い方を解説

    JavaScriptのsort()メソッドは、配列の要素を並べ替えるための組み込みメソッドです。アルファベット順・数値順といった並べ替えの基準に加え、昇順・降順も自由に指定できます。デフォルトでは要素が文字列として比較され昇順にソートされますが、比較関数を渡すことで任意の順序を実現できます。 なお、sort()は元の配列そのものを変更する「破壊的メソッド」である点にも注意しましょう。元の配列を保持したい場合は、スプレッド構文([...arr])などで事前にコピーしておくのが安全です。 コード例 以下は、sort()メソッドを使って配列をソートするシンプルなサンプルコードです。 <!DO