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

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

JavaScriptにおけるメソッドの共有

JavaScriptでは、メソッドをオブジェクト（コンストラクタ関数）のprototypeプロパティに定義することで、複数のインスタンス間でそのメソッドを共有できます。

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

以下は、JavaScriptでメソッドを共有する具体的なコード例です。

コード例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: blueviolet;
    }
</style>
</head>
<body>
<h1>Shared methods in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to the call the displayInfo method of student1 and student2 object</h3>
<script>
    let resEle = document.querySelector(".result");
    function Student(name, age, standard) {
        this.name = name;
        this.age = age;
        this.standard = standard;
    }
    Student.prototype.displayInfo = function () {
        return `${this.name} age ${this.age} : standard :${this.standard} <br>`;
    };
    let student1 = new Student("Rohan", 17, 12);
    let student2 = new Student("Shawn", 16, 11);
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.innerHTML = student1.displayInfo();
        resEle.innerHTML += student2.displayInfo();
    });
</script>
</body>
</html>

出力結果

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

「CLICK HERE」ボタンをクリックすると、student1とstudent2それぞれのdisplayInfoメソッドが呼び出され、次のように学生情報が表示されます。

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

ポイントのまとめ

  • メソッドをprototypeに定義すると、すべてのインスタンスで同一の関数を共有できる。
  • インスタンスごとに関数のコピーが作られないため、メモリ使用量を抑えられる。
  • prototypeに後からメソッドを追加した場合でも、既存のインスタンスから利用可能になる。
  1. JavaScriptのオブジェクト配列に配列メソッドを適用する方法

    JavaScriptでは、オブジェクトが格納された配列に対しても、通常の配列と同じようにpop()、push()、splice()などの標準的な配列メソッドをそのまま使用できます。オブジェクト配列はあくまで「配列」であるため、要素としてオブジェクトが入っていても配列操作のAPIは共通で動作します。 コード例 以下は、JavaScriptオブジェクトの配列に対して配列メソッドを使用するサンプルコードです。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

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

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