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で静的ネットワーク接続を構成する方法

推薦する

js キャンバスはランダムなパーティクル効果を実現します

この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

MySQL 5.7.17 インストール グラフィック チュートリアル (Windows)

最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...

MySQL ALTERコマンドの知識ポイントのまとめ

テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...

HTML の <input> タグの詳細な説明と、それを無効にする方法

定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...

HTMLでカメラを読み込む方法

効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...

MySQL 5.7 でパスワードを変更する簡単な方法

これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...

Linuxシステムの入出力管理とvimの共通機能の詳細な説明

####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...

Javascript実践におけるコマンドモードの詳しい説明

目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...

Linux環境にJDKとTomcatをインストールする詳細な手順

目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...

CSS ペイント API: CSS のような描画ボード

1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...

CentOS 8.1 で LEMP (Linux+Nginx+MySQL+PHP) 環境を構築する (チュートリアルの詳細)

目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...

ウェブデザインにおけるポップアップウィンドウとフローティングレイヤーのデザイン

従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザイン パターンとテクノロジは...

VMware Workstation 14 Pro に Win10 システムをインストールする

この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...