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解凍バージョンのインストールチュートリアル
目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...
さっそく、コードを見てみましょう(初心者:特に言うことはありません) <!DOCTYPE ht...
CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...
今日は新しいCSS特殊効果、波型ウォーターボール効果を学びました。これもとても美しいです HTML:...
以下のように表示されます。 bb_sbからa1、a2、a1+a2 a、a1*a2 b、a1*1.0/...
3つの知識ポイント: 1. CSS子孫セレクターhttps://www.w3school.com.c...
会社が現在使用しているソリューションを確認するためにバックエンドにログインしました。使用される FT...
1. mysql5.6をインストールする docker 実行 mysql:5.6すべてのアイテムのダ...
エディターは、Vue3のデータの関連する問題も共有します。次のような例を見てみましょう。 Vue.c...
MySQL では、テーブル名の大文字と小文字の区別の問題が発生する可能性があります。実際、これはプラ...
目次1. 概要2. 応用例2.1、Docker コンテナ分離名前空間2.2. Docker のフリー...
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
Vueにaxiosを挿入する 'axios' から axios をインポートします。...
目次1. 基本的な例2. インスタンスプロトタイプのスコープを設定する3. グローバル変数の登録と使...
これを応用することで、ウェブサイトの一部の公開領域を独立したページにすることができ、その後、この技術...