JavaScript でプライベート メンバーを作成する

JavaScript でプライベート メンバーを作成する

序文:

オブジェクト指向プログラミング言語のprivateキーワードは、プロパティとメソッドを、それらが宣言されているクラス内でのみアクセス可能にするために使用できるアクセス修飾子です。これにより、非表示にする必要があり、クラスの外部とやり取りしない基礎ロジックを簡単に非表示にすることができます。

しかし、JavaScript で同様の機能を実現するにはどうすればよいでしょうか? 予約キーワードprivateはありませんが、新しい標準の JavaScript では、クラスのプライベート メンバーを作成するための独自の方法があります。ただし、これはまだ ES2020 の実験的なドラフト段階であり、構文は奇妙で、接頭辞として # が付いています。 JavaScript コードでプライベート プロパティとメソッドを実装する方法はいくつかあります。

1. クロージャを使用する

クロージャは、プライベート プロパティまたはメソッドをカプセル化するために使用できます。クロージャを使用すると、外部関数の変数や機能にアクセスできます。

次のコード スニペット:

関数 MyProfile() {
    const myTitle = "DevPoint";

    戻る {
        getTitle: 関数 () {
            myTitle を返します。
        },
    };
}
定数 myProfile = MyProfile();
console.log(myProfile.getTitle()); // DevPoint


これは、最上位の自己呼び出し関数呼び出しを変数に割り当て、関数の戻り値でその内部関数の一部のみを公開することを意味します。

const ButtonCreator = (関数() {
    定数プロパティ = {
        幅: 100,
        高さ: 50,
    };

    const getWidth = () => properties.width;
    const getHeight = () => properties.height;
    const setWidth = (幅) => (properties.width = 幅);
    const setHeight = (height) => (properties.height = height);

    関数を返す(幅、高さ){
        プロパティの幅 = 幅;
        プロパティの高さ = 高さ;

        戻る {
            幅を取得、
            高さを取得、
            幅の設定、
            高さを設定する、
        };
    };
})();
ボタンを新規作成します。
console.log(button.getHeight()); // 360

2. ES6クラスを使用する

コードを OOP アプローチに近づけるには、ES6 で導入された class キーワードを使用できます。プロパティとメソッドをプライベートにするには、クラス外で定義します。

上記の ButtonCreator の例をリファクタリングして、クラスを使用しましょう。

定数プロパティ = {
    幅: 100,
    高さ: 50,
};

クラス ButtonCreator {
    コンストラクタ(幅, 高さ) {
        プロパティの幅 = 幅;
        プロパティの高さ = 高さ;
    }

    getWidth = () => properties.width;
    getHeight = () => properties.height;
    setWidth = (幅) => (properties.width = 幅);
    setHeight = (高さ) => (properties.height = 高さ);
}
ボタンを新規作成します。
console.log(button.getHeight()); // 360

ここで、プロパティがパブリックであるが、コンテキストがButtonCreatorを指すプライベート メソッドでそれらを使用したい場合は、次の方法で実現できます。

const プライベート = {
    幅を計算する() {
        this.width を返します。
    },
};

クラス ButtonCreator {
    コンストラクタ(幅, 高さ) {
        this.width = 幅;
        this.height = 高さ;
    }

    getWidth = () => privates.calculateWidth.call(this);
    getHeight = () => this.height;
    setWidth = (幅) => (this.width = 幅);
    setHeight = (height) => (this.height = height);
}
ボタンを新規作成します。
console.log(button.getHeight()); // 360

上記のコードでは、指定されたコンテキストで関数を呼び出すために使用されるFunction.prototype.callを使用しています。この例では、 ButtonCreatorクラスのコンテキストが使用されています。

プライベート関数にもパラメータが必要な場合は、呼び出しに追加の引数として渡すことができます。

const プライベート = {
    幅を計算する(パーセント) {
        this.width * パーセントを返します。
    },
};

クラス ButtonCreator {
    コンストラクタ(幅, 高さ) {
        this.width = 幅;
        this.height = 高さ;
    }

    getWidth = () => privates.calculateWidth.call(this, 0.1);
    getHeight = () => this.height;
    setWidth = (幅) => (this.width = 幅);
    setHeight = (height) => (this.height = height);
}
ボタンを新規作成します。
console.log(button.getWidth()); // 60

3. ES2020提案を使用する

これはまだ ES2020 実験ドラフトの段階であり、プライベート メソッドまたはプロパティの定義が導入されています。構文は奇妙で、先頭に # が付きます。

クラス ButtonCreator {
    #幅;
    #身長;
    コンストラクタ(幅, 高さ) {
        this.#width = 幅;
        this.#height = 高さ;
    }
    // プライベートメソッド #calculateWidth() {
        this.#width を返します。
    }

    getWidth = () => this.#calculateWidth();
    getHeight = () => this.#height;
    setWidth = (幅) => (this.#width = 幅);
    setHeight = (height) => (this.#height = height);
}
ボタンを新規作成します。
console.log(button.width); // 未定義
console.log(button.getWidth()); // 600

4. WeakMapを使用する

このアプローチは、クロージャ アプローチに基づいており、スコープ変数アプローチを使用してプライベートWeakMap <String, String> を作成し、その WeakMap を使用してそれに関連付けられたプライベート データを取得します。これは、すべてのインスタンスがWeakMap <String, String> を共有できるため、インスタンスが作成されるたびにメソッドを再作成する必要がないため、スコープ変数アプローチよりも高速です。

const ButtonCreator = (関数() {
    const privateProps = 新しい WeakMap();
    クラス ButtonCreator {
        コンストラクタ(幅、高さ、名前) {
            this.name = name; // パブリックプロパティ privateProps.set(this, {
                width, // プライベート プロパティ height, // プライベート プロパティ calculateWidth: () => privateProps.get(this).width, // プライベート メソッド });
        }

        getWidth = () => privateProps.get(this).calculateWidth();
        getHeight = () => privateProps.get(this).height;
    }
    ButtonCreator を返します。
})();
ボタンを新規作成します。
console.log(button.width); // 未定義
console.log(button.getWidth()); // 600

このアプローチは、プライベート メソッドを使用する場合には少し扱いに​​くいです。

5. TypeScriptを使用する

TypeScript JavaScriptの一種として使用し、 privateキーワードを使用してオブジェクト指向言語の機能を忠実に再現することができます。

クラス ButtonCreator {
    プライベート幅: 数値;
    プライベート高さ: 数値;
    コンストラクタ(幅: 数値, 高さ: 数値) {
        this.width = 幅;
        this.height = 高さ;
    }
    プライベートcalculateWidth() {
        this.width を返します。
    }
    パブリック getWidth() {
        this.calculateWidth() を返します。
    }
    パブリック getHeight() {
        this.height を返します。
    }
}
ボタンを新規作成します。

console.log(button.getWidth()); // 600
console.log(button.width); // エラー TS2341: プロパティ 'width' はプライベートであり、クラス 'ButtonCreator' 内でのみアクセスできます。

要約:

JavaScript でプライベート メンバーを作成する方法についてはこれで終わりです。JavaScript でプライベート メンバーを作成する方法についての詳細は、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript のプライベート メンバーを調べる
  • プライベートメンバーの構文機能を実装する方法とJavaScriptに基づいてプライベートメンバーを実装する方法
  • JavaScript プライベート メンバー分析
  • JavaScript のプライベート メンバー

<<:  HTML 9グリッドレイアウトの実装方法

>>:  emとは?emとpxの紹介と変換方法

推薦する

Webフォーム作成スキル

実際、上記の 3 つの表はいずれも 3 行 3 列です。区切り線を非表示にするコツはルールにあります...

Ubuntu で時刻同期に NTP を使用する

NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...

セマンティックHTML構造を理解する方法

HTML と CSS は誰もが知っていると思います。HTML の構造と CSS の表現の分離も知って...

Vueのデータ応答性原則の詳細な説明

この記事は主に、Vue のレスポンシブ ソース コードを理解していない、または触れたことがない人向け...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...

CentOS7にsshをインストールして設定する

1. openssh-serverをインストールする yum インストール -y openssl o...

MySQL 5.7.18 でパスワードを変更する方法

MySQL 5.7.18 でパスワードを変更する方法: 1. まずMySQLサーバーをシャットダウン...

Ubuntu 向け VMware Tools のインストールと構成のチュートリアル

以前、ブロガーは VMware 仮想マシンに Ubuntu システムをインストールしました。まだイン...

shtmlとhtmlの違い

Shtml と asp は似ています。shtml という名前のファイルでは、asp の命令と同様に、...

MySQL トリガーの追加、削除、変更、クエリ操作の例

この記事では、例を使用して、MySQL トリガーの追加、削除、変更、およびクエリ操作について説明しま...

CSS flex 複数列レイアウト

基本的な3列レイアウト 。容器{ ディスプレイ: フレックス; 幅: 500ピクセル; 高さ: 20...

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有し...

Dockerコンテナの接続と通信の実装

ポート マッピングは、Docker を別のコンテナーに接続する唯一の方法ではありません。 Docke...

XHTML 入門チュートリアル: フォーム タグ

<br />フォームはユーザーが情報を送信するための重要なチャネルです。このセクションで...

JavaScript データのフラット化の詳細な説明

目次フラット化とは何か再帰トストリング減らすアンダーコア_.平坦化_。連合_。違い要約するフラット化...