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

JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

JavaScriptでは、オブジェクトのprototypeプロパティに値を追加することで、プロパティを複数のインスタンス間で共有できます。prototypeに登録されたプロパティは、そのコンストラクタから生成されたすべてのインスタンスから共通して参照されます。

この手法には大きなメリットがあります。各インスタンスごとに同じ値のプロパティを個別に定義する必要がないため、コードの重複を減らし、メモリの使用量も抑えられるのです。たとえば、学校名のように全生徒で共通する情報は、prototypeにまとめておくのが理想的です。

実装例：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 properties in JavaScript</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to the view properties of student1 and student2 objects</h3>
<script>
   let resEle = document.querySelector(".result");
   function Student(name, age) {
      this.name = name;
      this.age = age;
   }
   Student.prototype.school = "St Marks School";
   let student1 = new Student("Rohan", 17);
   let student2 = new Student("Shawn", 16);
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML = `${student1.name} age ${student1.age} : school
      :${student1.school} <br>`;
      resEle.innerHTML += `${student2.name} age ${student2.age} : school
      :${student2.school}`;
   });
</script>
</body>
</html>

コードのポイント解説

このサンプルでは、以下のような流れでプロパティの共有を実現しています。

  • コンストラクタ関数 Student：this.name と this.age はインスタンスごとに異なる値を持つ固有のプロパティです。
  • Student.prototype.school：「St Marks School」という学校名をprototypeに設定することで、すべての学生インスタンスが同じ値を共有します。
  • new演算子によるインスタンス化：student1 と student2 の2つのオブジェクトを作成していますが、どちらも school プロパティには自動的にアクセスできます。
  • ボタンクリックイベント：「CLICK HERE」ボタンを押すと、2人の学生の名前・年齢・共有された学校名が画面に表示されます。

出力結果

JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

「CLICK HERE」ボタンをクリックすると、以下のようにstudent1とstudent2の両方に「St Marks School」が表示され、prototype経由でプロパティが共有されていることが確認できます。

JavaScriptでプロパティを共有する方法 ― prototype活用のコード例と解説

このようにprototypeを活用すれば、共通のデータを一箇所で管理でき、保守性の高いコードを書くことができます。ES6以降のclass構文でも内部では同様にprototypeが使われているため、仕組みを理解しておくことは現代のJavaScript開発でも非常に有用です。


  1. JavaScriptのクロージャを使ってプライベートプロパティを実装する方法

    JavaScriptには、Javaなどの言語のような private 修飾子が存在しないため、オブジェクトの外部からアクセスできない「プライベートな」データを表現するにはひと工夫が必要です。その定番テクニックのひとつが、クロージャ（closure） を活用する方法です。 クロージャでプライベート化が実現できる理由 クロージャとは、関数が生成された際のスコープ（外側の関数内の変数）への参照を保持し続ける仕組みのことです。関数内で宣言されたローカル変数は、外部のコードから直接参照したり書き換えたりすることはできません。 そこで、内部変数へアクセスできる関数だけを戻り値として返すようにすることで、

  2. JavaScriptの静的プロパティとは？クラス関数に直接定義する方法を解説

    JavaScriptの静的プロパティ（Static Properties）とは JavaScriptにおける静的プロパティは、クラスのprototypeプロパティではなく、クラス関数そのものに割り当てられるプロパティです。この特徴により、オブジェクトをインスタンス化することなく、直接アクセスして呼び出すことができます。 通常のインスタンスプロパティは各オブジェクトごとに生成されますが、静的プロパティはクラス全体で共有される単一の値として扱われます。そのため、設定値やユーティリティ的なデータなど、全インスタンスで共通して使いたい情報を格納するのに適しています。 静的プロパティの基本的な書き方 コ