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の紹介と変換方法

推薦する

Linux でネットワーク パケット損失と遅延をシミュレートする方法

netem と tc: netem は、Linux カーネル バージョン 2.6 以降で提供されるネ...

Linux環境でOpenSSL証明書を生成する

1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...

ウェブデザインでよくある間違いのまとめ

Web ページを設計する過程で、デザイナーが間違いを犯すのは必然です。特に新人は、新しいアイデアを実...

ブラウザのCSS、JavaScript、背景画像のキャッシュをクリアする簡単な方法

実際のプロジェクト開発プロセスでは、ページがサーバーにアップロードされます。サーバーへの負荷を軽減し...

MySQL で GTID モードをオンラインで有効または無効にする

目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...

CSS3 グラデーション背景の互換性の問題

グラデーションの背景色を作成するときは、 linear-gradient() 関数を使用して線形グラ...

Docker コンテナのデプロイの試み - マルチコンテナ通信 (node+mongoDB+nginx)

その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...

Windows システム mysql5.7.18 インストール グラフィック チュートリアル

Windows システム向け MySQL インストール チュートリアルダウンロード1. https:...

Win10+Ubuntu 20.04 LTS デュアル システム インストール (UEFI + GPT) (画像とテキスト、複数の画像には注意)

Win10 のインストール (すでにインストールされている場合はスキップしてください) win10...

Linux の sudo 脆弱性により不正な特権アクセスが発生する可能性がある

Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...

JavaScript BOM の説明

目次1. BOMの紹介1. JavaScriptは3つの部分から構成される2.ウィンドウオブジェクト...

Angularコンポーネントのライフサイクルの詳しい説明(パート2)

目次1. ビューフック1. ngAfterViewInit および ngAfterViewCheck...

MySQLをシンプルに学ぶ

序文データベースは常に私の弱点でした。自分の経験 (python+sqlalchemy) を組み合わ...

HTML5 と HTML4 の 10 の主な違い

HTML5 は HTML 標準の次のバージョンです。ますます多くのプログラマーが、Web サイトの構...

MySQL での正規表現置換のための replace と regexp の使用法の分析

この記事では、例を使用して、replace と regexp を使用して MySQL で正規表現を置...