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 をよろしくお願いいたします。

以下もご興味があるかもしれません: