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

JavaScriptでインスタンス間のプライベートメンバーを共有・操作する方法をわかりやすく解説

JavaScriptでは、コンストラクタ関数内でletやconstを使って変数を宣言すると、その変数は外部から直接アクセスできない「プライベートメンバー」となります。このプライベートな値には、関数内で定義された特権メソッド（クロージャ）を通じてのみアクセスできます。

以下は、Personコンストラクタでプライベートメンバーを持つ複数のインスタンスを作成し、それぞれの値を取得するサンプルコードです。

サンプルコード

<!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: blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScriptでプライベートメンバーを共有する</h1>
<div class="result"></div>
<br />
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックするとpersonNameの値が表示されます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    function Person(name) {
        let personName = name;
        this.returnName = function () {
            return personName;
        };
    }
    let person1 = new Person("Rohan");
    let person2 = new Person("Shawn");
    BtnEle.addEventListener("click", () => {
        resEle.innerHTML =
        "person1.returnName() = " + person1.returnName() + "<br>";
        resEle.innerHTML +=
        "person2.returnName() = " + person2.returnName() + "<br>";
        resEle.innerHTML +=
        "person1.personName = " + person1.personName + "<br>";
        resEle.innerHTML +=
        "person2.personName = " + person2.personName + "<br>";
    });
</script>
</body>
</html>

コードのポイント

  • personNameはletで宣言されているため、インスタンスの外からは参照できません。
  • this.returnNameはクロージャとしてpersonNameにアクセスできるため、特権メソッドとして機能します。
  • person1とperson2はそれぞれ独立したプライベート変数を持ちます。

実行結果

JavaScriptでインスタンス間のプライベートメンバーを共有・操作する方法をわかりやすく解説

「ここをクリック」ボタンをクリックすると、次のように表示されます。

JavaScriptでインスタンス間のプライベートメンバーを共有・操作する方法をわかりやすく解説

結果の読み方

returnName()メソッドを呼び出すと、各インスタンスに保存された名前（Rohan、Shawn）が正しく返されます。一方、person1.personNameやperson2.personNameのようにプロパティとして直接アクセスしようとするとundefinedが返ります。これは、personNameがプライベートメンバーであり、外部からは隠蔽されているためです。

このように、クロージャを活用することでJavaScriptでもデータのカプセル化を実現できます。ES2022以降では#を使ったクラスのプライベートフィールドも利用可能なので、用途に応じて使い分けるとよいでしょう。

  1. OperaでJavaScriptを有効にする方法【初心者向けガイド】

    OperaでJavaScriptを有効にする手順OperaブラウザでJavaScriptを有効にしたい場合は、以下の手順に従って設定を行ってください。1. 設定画面を開くまず、Operaブラウザを起動し、画面左上にあるメニューボタンをクリックします。表示されたメニューの中から「設定（Settings）」を選択してください。2. 「javascript」を検索する設定画面が開いたら、ページ上部にある検索ボックス（設定の検索）に「javascript」と入力します。3. JavaScriptの許可設定を変更する検索を実行すると、JavaScriptに関するオプションが表示されます。ここで「サイトが

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

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