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

【JavaScript】配列内の複数オブジェクト間でメソッドを共有する方法（プロトタイプ活用）

配列に格納された複数のオブジェクト間でメソッドを共有したい場合、JavaScriptのプロトタイプ（prototype）を利用するのが最も効率的です。

通常、オブジェクトごとに関数を個別に定義すると、インスタンスの数だけ同じ処理がメモリ上に複製されてしまいます。しかし、コンストラクター関数のprototypeにメソッドを定義すれば、そこから生成されたすべてのインスタンスが同一のメソッドを共有できるようになり、メモリの節約にもつながります。

以下は、プロトタイプを使って配列内の複数のPersonオブジェクト間でwelcome()メソッドを共有するコード例です。

サンプルコード

<!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: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>Share a method between objects in an array</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、すべてのpersonオブジェクトのwelcome()メソッドが呼び出されます</h3>
<script>
    let resEle = document.querySelector(".result");

    // コンストラクター関数の定義
    function Person(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    // prototypeにメソッドを定義することで全インスタンスで共有される
    Person.prototype.welcome = function () {
        return "Welcome " + this.firstName + " " + this.lastName;
    };

    // Personインスタンスを配列に格納
    let obj = [
        new Person("Rohit", "Sharma"),
        new Person("Shawn", "Mendes"),
        new Person("Michael", "Clarke"),
    ];

    document.querySelector(".Btn").addEventListener("click", () => {
        obj.forEach((item) => {
            resEle.innerHTML += item.welcome() + "<br>";
        });
    });
</script>
</body>
</html>

コードの解説

このコードのポイントは以下の通りです。

  • Person(firstName, lastName)というコンストラクター関数を定義し、名前と苗字を各インスタンスのプロパティとして保持しています。
  • Person.prototype.welcomeとしてメソッドを1度だけ定義しています。これにより、生成されたすべてのインスタンスがこのメソッドを参照できるようになります。
  • new Person()で作成した3つのオブジェクトを配列objに格納しています。
  • ボタンをクリックすると、forEach()によって配列内の各オブジェクトに対してwelcome()メソッドが呼び出され、結果が順番に表示されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

【JavaScript】配列内の複数オブジェクト間でメソッドを共有する方法（プロトタイプ活用）

「CLICK HERE」ボタンをクリックすると、配列内のすべてのオブジェクトのwelcome()メソッドが実行され、以下のように各人物へのウェルカムメッセージが表示されます。

【JavaScript】配列内の複数オブジェクト間でメソッドを共有する方法（プロトタイプ活用）

  1. JavaScriptのArray.prototype.includes()メソッドとは？配列内に特定の要素が含まれるか判定する方法

    Array.prototype.includes()メソッドとは JavaScriptのArray.prototype.includes()メソッドは、配列の中に特定の要素が含まれているかどうかを判定するためのメソッドです。要素が見つかった場合はtrue、見つからなかった場合はfalseを返します。 基本構文 arr.includes(searchElement[, fromIndex]) searchElement：検索対象となる要素を指定します。 fromIndex（省略可能）：検索を開始するインデックス位置です。省略した場合は先頭（0）から検索されます。 サンプルコード 以下は、in

  2. JavaScriptでIDごとにオブジェクトの配列をグループ化する方法

    JavaScriptでオブジェクトの配列をidなどの特定のキーごとにグループ化したい場合、reduce()メソッドを使うと簡潔に実装できます。この記事では、どのプロパティにも対応できる汎用的なgroupBy関数を作成し、実際のサンプルコードとともにその仕組みを詳しく解説します。 reduce()によるグループ化の考え方 reduce()は、配列の各要素を順番に処理しながら、1つの累積値（ここではオブジェクト）を組み立てていくメソッドです。各要素からキーの値を取り出し、その値がまだ結果オブジェクトに存在しなければ新しい配列を作成して、そこへ要素を追加していくことでグループ化を実現します。 サ