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

JavaScriptのsuper()関数とは？親クラスのコンストラクタ呼び出しを徹底解説

super()関数とは

JavaScriptのsuper()関数は、親クラス（スーパークラス）のコンストラクタを呼び出すために使用される機能です。また、superキーワードを利用することで、オブジェクトの親クラスが持つメソッドやプロパティにもアクセスできます。

extendsキーワードでクラスを継承した場合、子クラスのコンストラクタ内でthisを使用する前に必ずsuper()を呼び出す必要がある点に注意しましょう。これはJavaScriptにおける重要なルールです。

super()の主な用途

  • 子クラスのコンストラクタから親クラスのコンストラクタを呼び出す
  • 静的メソッド内で親クラスの静的メソッドを呼び出す（例：super.msg()）
  • メソッドのオーバーライド時に、親クラスの同名メソッドを呼び出して処理を再利用する

サンプルコード

以下のコードを実行して、super()の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <script>
         class Department {
            constructor() {}
            static msg() {
               return 'Hello';
            }
         }
         class Employee extends Department {
            constructor() {}
            static displayMsg() {
               return super.msg() + ' World!';
            }
         }
         document.write(Employee.displayMsg());
      </script>
   </body>
</html>

実行結果

Hello World!

コードの解説

この例では、親クラスとなるDepartmentクラスに静的メソッドmsg()が定義されています。一方、EmployeeクラスはextendsによってDepartmentクラスを継承しており、その静的メソッドdisplayMsg()の中でsuper.msg()を使って親クラスのmsg()メソッドを呼び出しています。

その結果、親クラスの戻り値「Hello」に「 World!」が連結され、「Hello World!」という文字列が画面に出力されます。このようにsuperキーワードを使えば、継承関係にある親クラスの機能を簡単に再利用できるのが大きなメリットです。

  1. JavaScriptのクロージャとは？仕組みと実装例をわかりやすく解説

    クロージャとはJavaScriptにおけるクロージャ（Closure）とは、外側の関数の実行が完了して値を返した後であっても、内側の関数から外側の関数のスコープ（変数）にアクセスできる仕組みのことです。言い換えれば、内側の関数は、外側の関数の変数に対して常にアクセスできるということです。この性質を活用することで、データを外部から直接操作されないように隠蔽したり、関数の呼び出し間で状態を保持する処理を実現したりすることが可能になります。クロージャのサンプルコード以下は、JavaScriptでクロージャを使用した具体的なコード例です。ボタンをクリックすると、クロージャによって保持された値を使って2

  2. JavaScriptのファーストクラス関数とは？特徴と使い方を実例で解説

    ファーストクラス関数（第一級関数）とは？ JavaScriptでは、関数もオブジェクトの一種として扱われます。そのため、関数を別の関数の引数（パラメータ）として渡したり、関数の中で別の関数を戻り値として返したりすることが可能です。 このような性質を持つことから、JavaScriptの関数はファーストクラス関数（第一級関数）と呼ばれています。つまり、関数は変数・オブジェクト・配列などに自由に格納できる「値」だということです。 さらに、関数を引数として受け取る、関数を戻り値として返す、あるいはその両方を行う関数は高階関数（Higher Order Function）と呼ばれます。 ファーストクラ