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

JavaScriptクラスの静的メソッド（static）とは？使い方と注意点を解説

JavaScriptのクラスには、インスタンス（オブジェクト）ではなくクラスそのものに紐づく「静的メソッド（staticメソッド）」を定義できます。静的メソッドは、クラスから直接呼び出すことができる一方、生成したオブジェクト（インスタンス）からは呼び出せないという特徴があります。

静的メソッド（staticメソッド）の基本

staticキーワードを付けて定義されたメソッドは、クラスに属するメソッドとなります。そのため、以下のような特徴を持ちます。

  • クラスからは呼び出せるが、オブジェクト（インスタンス）からは呼び出せない
  • インスタンスのプロパティ（this.nameなど）には直接アクセスできない
  • 主にユーティリティ関数やファクトリーメソッドとして利用される

例1：クラスから静的メソッドを呼び出す（正常に動作）

次の例では、クラス「Company」に静的メソッド「comp()」を定義し、オブジェクト「myComp」ではなくクラスそのものから呼び出しています。そのため、静的メソッド内の処理が正常に実行され、結果が出力されます。

<html>
<body>
<p id="method"></p>
<script>
    class Company {
        constructor(branch) {
            this.name = branch;
        }
        static comp() {
            return "Tutorix is the best e-learning platform"
        }
    }
    myComp = new Company("Tesla");
    document.getElementById("method").innerHTML = Company.comp();
</script>
</body>
</html>

出力結果

Tutorix is the best e-learning platform

このように、Company.comp()のようにクラス名を指定して呼び出すことで、静的メソッドの戻り値が正しく表示されます。

例2：オブジェクトから静的メソッドを呼び出す（エラーになる）

次の例では、クラスではなくオブジェクト（インスタンス）側から静的メソッドを呼び出しています。静的メソッドはインスタンスに引き継がれないため、この呼び出しは失敗し、画面には何も出力されません。

<html>
<body>
<p id="method"></p>
<script>
    class Company {
        constructor(branch) {
            this.name = branch;
        }
        static comp() {
            return "Tutorix is the best e-learning platform"
        }
    }
    myComp = new Company("Tesla");
    document.getElementById("method").innerHTML = myComp.comp();
</script>
</body>
</html>

ブラウザのコンソールを確認すると、「myComp.comp is not a function（myComp.compは関数ではありません）」というエラーが表示されます。これは、静的メソッドがインスタンスには存在しないためです。

まとめ

静的メソッドはクラスに属するメソッドであり、クラス名を使って「ClassName.method()」の形式で呼び出します。インスタンスから呼び出そうとするとエラーになるため、実装時には呼び出し元がクラスかオブジェクトかを意識することが重要です。共通の処理やユーティリティ的な機能をまとめたい場合に、静的メソッドは非常に便利な機能です。

  1. JavaScriptでプロトタイプを使ってメソッドを共有する方法

    JavaScriptにおけるメソッドの共有JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。通常、コンストラクタ内でthis.displayInfo = function(){...}のようにメソッドを定義すると、生成されるインスタンスごとに関数のコピーが作成され、メモリを無駄に消費します。一方、prototypeに定義すれば、関数は一度だけ生成され、すべてのインスタンスから参照・呼び出しできるようになります。これはメモリ効率の面でも大きなメリットがあります。以下は、JavaS

  2. JavaScriptでクラスに静的メソッドを割り当てる方法

    JavaScriptでクラスに静的メソッド（staticメソッド）を割り当てるには、メソッドの前にstaticキーワードを付けるだけです。静的メソッドは、クラスをインスタンス化することなく、クラス名から直接呼び出すことができます。 静的メソッドはクラスそのものに属するため、個々のインスタンスの状態に依存しないユーティリティ関数や計算処理などに適しています。なお、静的メソッドはインスタンスからは呼び出せず、必ずクラス名を介して呼び出す必要がある点に注意しましょう。 以下は、JavaScriptでクラスに静的メソッドを割り当てるコード例です。 コード例 <!DOCTYPE html>