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

staticメソッド内でJavaScriptオブジェクトを使用するには？引数として渡す正しい方法

実は、静的（static）メソッドの中でオブジェクトを直接扱おうとしても、期待した結果は得られません。しかし、オブジェクトをパラメータ（引数）として渡せば、静的メソッド内からでもそのオブジェクトにアクセスすることが可能です。以下、具体例を挙げながら詳しく見ていきましょう。

ポイント：静的メソッドはクラスから呼び出す

静的メソッドはクラスそのものに属するメソッドであり、Company.comp()のようにクラス名を使って呼び出します。myComp.comp()のようにインスタンスから呼び出すことはできないため、エラーになってしまう点に注意してください。静的メソッド内でオブジェクトのデータを利用したい場合は、オブジェクトを引数として渡すのが正しい方法です。

例1：オブジェクトを直接使用した場合

次の例では、オブジェクト「myComp」をパラメータとして渡さずに直接使用しようとしています。そのため、画面には何も表示されません。ブラウザのコンソールを開くと、「myComp.comp() is not a function」というエラーが出力されます。実際の結果を得るには、例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>

例2：オブジェクトをパラメータとして渡した場合

次の例では、オブジェクトがパラメータとして渡されています。そのため、出力結果のように正しく文字列が表示されます。

<html>
<body>
<p id="method"></p>
<script>
    class Company {
        constructor(branch) {
            this.name = branch;
        }
        static comp(val) {
            return "Elon musk is the head of " + val.name
        }
    }
    myComp = new Company("Tesla");
    document.getElementById("method").innerHTML = Company.comp(myComp);
</script>
</body>
</html>

出力結果

Elon musk is the head of Tesla

まとめ

静的メソッド内でオブジェクトを利用したい場合は、メソッドをクラス名から呼び出し、対象のオブジェクトを引数として渡しましょう。インスタンスから静的メソッドを呼び出すとエラーになるため、この違いをしっかり押さえておくことが重要です。

  1. JavaScriptでオブジェクトのメソッドをクリックハンドラーにバインドする方法

    JavaScriptでイベント処理を実装する際、オブジェクトのメソッドをそのままクリックハンドラーとして登録すると、thisの参照が意図しないものへと変わり、思うように動作しないことがあります。本記事では、アロー関数を活用してオブジェクトのメソッドをクリックハンドラーに正しくバインドする方法を、実際のコード例とともにわかりやすく解説します。 実装例：クリック回数をカウントするデモ 以下は、ボタンがクリックされた回数をオブジェクトのプロパティで管理し、その結果を画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="ja&qu

  2. 【JavaScript】配列内のネストされたオブジェクトの値を合計する方法

    この記事では、JavaScriptを使って、配列内にネストされた（入れ子構造の）オブジェクトの値を合計する方法を解説します。サンプルコードでは、JSONデータの複数階層に格納された数値（costNum）を順番に取り出し、その合計をブラウザ上に表示します。 コード例 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=d