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の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: win10でのmysql5.7.21解凍バージョンのインストールチュートリアル
この記事の例では、参考のためにjsキャンバスランダムパーティクルエフェクトの具体的なコードを共有して...
ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...
最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...
テーブル名を変更したり、テーブル フィールドを変更したりする必要がある場合は、 MySQL ALTE...
定義と使用法<input> タグはユーザー情報を収集するために使用されます。 type ...
効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...
これは公式のスクリーンショットです。MySQL 5.7 をインストールすると、デフォルトのパスワード...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...
####システム内の入出力の管理#### 1. システムの入力と出力のリダイレクトを理解する入力リダ...
目次意味構造例カスタムショートカットキー元に戻すとやり直し録音と再生マクロ要約する意味リクエストをオ...
目次1. JDKをインストールする手動インストール2. トムキャット1. JDKをインストールする注...
1. Canvas画像をCSS背景画像として使用するCSS ペイント API は、Canvas キャ...
目次ステップ1: CentOS 8でパッケージを更新するステップ2: CentOS 8にNginx ...
従来のソフトウェアから Web ウェアへの段階的な移行の傾向の中で、デザイン パターンとテクノロジは...
この記事では、VMware Workstation 14 Proにシステムをインストールする方法を紹...