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

JavaScriptのプロトタイプにメソッドを追加する方法

JavaScriptのプロトタイプにメソッドを追加する方法

JavaScriptでは、コンストラクタ関数のprototypeプロパティにメソッドを追加することで、そのコンストラクタから生成されたすべてのインスタンスが同じメソッドを共有できるようになります。各インスタンスに個別にメソッドを定義する必要がなくなるため、メモリの使用量を抑えられ、コードの保守性も向上します。

以下は、JavaScriptのプロトタイプにメソッドを追加するコード例です。

コード例

<!DOCTYPE html>
<html lang="ja">
<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>JavaScriptのプロトタイプにメソッドを追加する</h1>
<div class="result"></div>
<br />
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、person1とperson2オブジェクトのメソッドが呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function personConstructor(fName, lName, birthYear) {
        this.fName = fName;
        this.lName = lName;
        this.birthYear = birthYear;
    }
    personConstructor.prototype.welcome = function () {
        return "Welcome " + this.fName + " " + this.lName;
    };
    personConstructor.prototype.calcAge = function () {
        return "Your age = " + (new Date().getFullYear() - this.birthYear);
    };
    let person1 = new personConstructor("Rohan", "Sharma", 1995);
    let person2 = new personConstructor("Shawn", "Smith", 1992);
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML = "person1.welcome() = " + person1.welcome() + "<br>";
        resEle.innerHTML += "person1.calcAge() = " + person1.calcAge() + "<br>";
        resEle.innerHTML += "person2.welcome() = " + person2.welcome() + "<br>";
        resEle.innerHTML += "person2.calcAge() = " + person2.calcAge() + "<br>";
    });
</script>
</body>
</html>

コードの解説

このコードでは、まずpersonConstructorというコンストラクタ関数を定義し、名（fName）・姓（lName）・生年（birthYear）の3つのプロパティを初期化しています。

続いて、personConstructor.prototypeに対して、以下の2つのメソッドを追加しています。

  • welcome() — 名前と姓を連結し、「Welcome Rohan Sharma」のような挨拶文を返します。
  • calcAge() — 現在の年から生年を差し引いて年齢を計算し、その結果を返します。

プロトタイプに定義されたメソッドは、person1やperson2など、このコンストラクタから生成されたすべてのオブジェクトから呼び出すことができます。メソッドの実体は1つだけなので、インスタンスが増えてもメモリを無駄に消費しません。

実行結果

JavaScriptのプロトタイプにメソッドを追加する方法

「クリックしてください」ボタンをクリックすると −

JavaScriptのプロトタイプにメソッドを追加する方法

このように、各オブジェクトのwelcome()とcalcAge()の実行結果が画面に表示されます。プロトタイプを活用することで、複数のインスタンス間でメソッドを効率的に共有でき、よりクリーンでパフォーマンスの高いコードを書くことができます。

  1. JavaScriptでプロトタイプを変更・上書きする方法

    JavaScriptでは、コンストラクタ関数が持つprototypeプロパティを書き換えることで、そのプロトタイプを継承しているすべてのインスタンスのメソッドを動的に変更できます。既存のメソッドを上書きすると、すでに生成済みのインスタンスにも即座に変更内容が反映されます。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="

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

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