JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明

JavaScript のプライベート クラス フィールドと TypeScript のプライベート修飾子の詳細な説明

JavaScript のプライベート クラス フィールドとプライバシーの必要性

これまで、JavaScript には、もちろん従来のクロージャを除いて、変数へのアクセスを保護するネイティブ メカニズムはありませんでした。

クロージャは、人気のあるモジュール パターンなど、JavaScript における多くのプライバシーに似たパターンの基礎となります。しかし、近年の ECMAScript 2015 クラスの使用により、開発者はクラス メンバーのプライバシーをより厳密に制御する必要性を感じるようになりました。

クラス フィールドの提案 (執筆時点ではステージ 3) では、プライベート クラス フィールドを導入することでこの問題を解決しようとしています。

どのような見た目か見てみましょう。

JavaScript プライベートクラスフィールドの例

以下はプライベート フィールドを持つ JavaScript クラスです。「パブリック」メンバーとは異なり、各プライベート フィールドはアクセスする前に宣言する必要があることに注意してください。

クラス Person {
  #年;
  #名前;
  #姓;
  コンストラクタ(名前、姓、年齢) {
    this.#name = 名前;
    this.#surname = 姓;
    this.#age = 年齢;
  }
  フルネームを取得する() {
    `${this.#name} + ${this.#surname}` を返します。
  }
}

プライベート クラス フィールドはクラス外部からアクセスできません。

クラス Person {
  #年;
  #名前;
  #姓;
  コンストラクタ(名前、姓、年齢) {
    this.#name = 名前;
    this.#surname = 姓;
    this.#age = 年齢;
  }
  フルネームを取得する() {
    `${this.#name} + ${this.#surname}` を返します。
  }
}
const marta = new Person("Marta", "Cantrell", 33);
console.log(marta.#age); // 構文エラー

これが本当の「プライバシー」です。 TypeScript について少しでも知っている場合は、「ネイティブ」プライベート フィールドと TypeScript の private 修飾子の共通点は何なのか疑問に思うかもしれません。

答えは「いいえ」です。しかし、なぜ?

TypeScriptのprivate修飾子

従来のプログラミング言語の経験がある開発者は、TypeScript の private 修飾子に精通している必要があります。つまり、このキーワードの目的は、クラス外からのクラス メンバーへのアクセスを拒否することです。

ただし、TypeScript は JavaScript の上のレイヤーであり、TypeScript コンパイラーは private を含むすべての派手な TypeScript コメントを削除する必要があることを忘れないでください。

つまり、次のクラスは必要な動作を実行しません。

クラス Person {
  プライベート年齢:番号;
  プライベート名: 文字列;
  個人の姓: 文字列;
  コンストラクター(名前: 文字列、姓: 文字列、年齢: 数値) {
    this.name = 名前;
    this.surname = 姓;
    this.age = 年齢;
  }
  フルネームを取得する() {
    `${this.name} + ${this.surname}` を返します。
  }
}
const liz = new Person("Liz", "Cantrill", 31);
// @ts を無視
コンソールにログ出力します。

//@ts-ignore がない場合、 liz.age にアクセスすると TypeScript でエラーが発生するだけですが、コンパイル後には次の JavaScript コードが生成されます。

「厳密な使用」;
var Person = /** @class */ (function () {
    関数 Person(名前, 姓, 年齢) {
        this.name = 名前;
        this.surname = 姓;
        this.age = 年齢;
    }
    Person.prototype.getFullName = 関数 () {
        this.name + " + " + this.surname を返します。
    };
    Person を返します。
}());
var liz = new Person("Liz", "Cantrill", 31);
console.log(liz.age); // 31

予想どおり、liz.age をコンソールに出力できます。ここでの重要な点は、TypeScript の private はそれほどプライベートではなく、TypeScript レベルでは便利に感じられるだけで、「本当のプライバシー」ではないということです。

それでは、TypeScript の「ネイティブ」プライベート クラス フィールドに移りましょう。

TypeScript のプライベート クラス フィールド

TypeScript 3.8 では ECMAScript のプライベート フィールドがサポートされますが、TypeScript のプライベート修飾子と混同しないでください。

以下は TypeScript のプライベート クラス フィールドを持つクラスです。

クラス Person {
    #年齢: 数字;
    #名前: 文字列;
    #姓: 文字列;
    コンストラクター(名前:文字列、姓:文字列、年齢:数値) {
        this.#name = 名前;
        this.#surname = 姓;
        this.#age = 年齢;
    }
    フルネームを取得する() {
        `${this.#name} + ${this.#surname}` を返します。
    }
}

型注釈を除けば、ネイティブ JavaScript と違いはありません。メンバーには外部からアクセスできません。しかし、TypeScript のプライベート フィールドの本当の問題は、内部的に WeakMap が使用されていることです。

このコードをコンパイルするには、tsconfig.json でターゲット コンパイル バージョンを調整する必要があります。これは少なくとも ECMAScript 2015 である必要があります。

{
  "コンパイラオプション": {
    "ターゲット": "es2015",
    "厳密": 真、
    "lib": ["dom","es2015"]
  }
}

これは、対象ブラウザによっては問題になる可能性があり、WeakMap のポリフィルを提供する予定がない限り、新しい凝った構文を書くだけでも大変な作業になります。

JavaScript では、新しい構文を使用したい一方で、多くのポリフィルでユーザー エクスペリエンスを低下させたくないという緊張関係が常に存在します。

一方、新しいブラウザにリリースする場合でも、プライベート クラス フィールドについて心配する必要はありません。少なくとも今はそうです。 Firefox でさえこの提案を実装していません。

以上がJavaScriptのプライベートクラスフィールドとTypeScriptのプライベート修飾子の詳しい説明です。JavaScriptのプライベートクラスフィールドとTypeScriptのプライベート修飾子の詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • JavaScriptとTypeScriptの関係
  • JS デコレータ パターンと TypeScript デコレータ
  • MD5ハッシュを取得する際のPythonとJSの違いは何ですか
  • Easy Languageでjsを使用してmd5暗号化を実装する方法の詳細な説明
  • TypeScript および JavaScript プロジェクトに MD5 チェックサムを導入する

<<:  win10でのmysql5.7.21解凍バージョンのインストールチュートリアル

>>:  Linuxで静的ネットワーク接続を構成する方法

推薦する

uniapp プロジェクトの最適化方法と提案

目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...

シンプルなナビゲーションバー機能を実現するHTML+CSS

さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...

この記事ではCSSの組み合わせセレクターの使い方を説明します

CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...

CSS を使用して波状のウォーターボール効果を実装するためのサンプルコード

今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...

2列のデータをSQLの新しい列として操作する

以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...

要素 DateTimePicker+vue ポップアップボックスに時間のみが表示される問題を解決する

3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...

Serv-U FTPとADの完璧な統合ソリューションの詳細な説明

会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...

Ubuntu の Docker で mysql5.6 をインストールする方法

1. mysql5.6をインストールする docker 実行 mysql:5.6すべてのアイテムのダ...

Vue3 の参照と参照の詳細

エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...

MySQL における識別子の大文字と小文字の区別の問題の詳細な分析

MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...

Docker管理に関する断片的な知識のまとめ

目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...

ウェブページを最適化してメモリとCPUの使用率を削減

一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...

Vueでaxiosを簡単にカプセル化する方法

Vueにaxiosを挿入する 'axios' から axios をインポートします。...

Vue での Vue.prototype の使用に関する詳細な説明

目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...

shtml includeの使い方

これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...