従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプロパティを作成します。コンストラクターですぐに利用できる小さなデータの場合、これは問題ではありません。ただし、インスタンスで使用できるようになる前にデータを計算する必要がある場合は、その料金を前払いしたくない場合があります。たとえば、次のクラスを考えてみましょう。 クラス MyClass { コンストラクタ() { this.data = someExpensiveComputation(); } } ここでは、いくつかの高価な計算を実行した結果として オンデマンド属性モード高価な操作の実行を最適化する最も簡単な方法は、計算を実行する前にデータが必要になるまで待つことです。たとえば、次のように、ゲッター付きのアクセサー プロパティを使用して、オンデマンドで計算を行うことができます。 クラス MyClass { データを取得する() { someExpensiveComputation() を返します。 } } この場合、誰かがその 面倒な遅延読み込みプロパティパターンプロパティにアクセスしたときにのみ計算を実行するのが良いスタートです。本当に必要なのは、その時点以降の情報をキャッシュし、キャッシュされたバージョンのみを使用することです。しかし、この情報を簡単にアクセスできるようにキャッシュする場所はどこでしょうか?これを行う最も簡単な方法は、次のように、同じ名前のプロパティを定義し、その値を計算されたデータに設定することです。 クラス MyClass { データを取得する() { 実際のデータ = someExpensiveComputation(); Object.defineProperty(this, "データ", { 値: 実際のデータ、 書き込み可能: false、 設定可能: false、 列挙可能: false }); 実際のデータを返します。 } } ここで、 const オブジェクト = 新しい MyClass(); // ゲッターを呼び出す 定数 data1 = オブジェクト.data; // データプロパティから読み取ります オブジェクトのデータを返します。 実際、すべての計算は このパターンの欠点の 1 つは、 const オブジェクト = 新しい MyClass(); console.log(object.hasOwnProperty("data")); // 偽 const データ = オブジェクト.データ; console.log(object.hasOwnProperty("data")); // 真 この区別は多くの場合重要ではありませんが、オブジェクトを渡すときに微妙な問題が発生する可能性があるため、このパターンを理解することが重要です。幸いなことに、この問題は更新されたモデルを使用すれば簡単に修正できます。 クラスのプロパティを遅延読み込みするパターン遅延ロードされたプロパティが常にインスタンス内に存在することが重要であるユースケースがある場合は、 クラス MyClass { コンストラクタ() { Object.defineProperty(this, "データ", { 得る() { 実際のデータ = someExpensiveComputation(); Object.defineProperty(this, "データ", { 値: 実際のデータ、 書き込み可能: false、 設定可能: false }); 実際のデータを返します。 }, 設定可能: true、 列挙可能: true }); } } ここで、コンストラクター 次に、ゲッター関数は計算を実行し、 const オブジェクト = 新しい MyClass(); console.log(object.hasOwnProperty("data")); // 真 const データ = オブジェクト.データ; console.log(object.hasOwnProperty("data")); // 真 クラスの場合、これがおそらく使用するパターンです。一方、オブジェクト リテラルを使用すると、より簡単なアプローチが可能になります。 オブジェクトリテラルの遅延読み込みプロパティパターン クラスの代わりにオブジェクト リテラルを使用する場合、オブジェクト リテラルで定義されたゲッターは、データ プロパティと同様に、列挙可能な独自のプロパティ (プロトタイプ プロパティではなく) として定義されるため、プロセスははるかに簡単になります。つまり、オブジェクトに対して煩雑な遅延ロード プロパティ パターンを使用せずに、クラスに対して煩雑な遅延ロード プロパティ パターンを使用できるということです。 定数オブジェクト = { データを取得する() { 実際のデータ = someExpensiveComputation(); Object.defineProperty(this, "データ", { 値: 実際のデータ、 書き込み可能: false、 設定可能: false、 列挙可能: false }); 実際のデータを返します。 } }; console.log(object.hasOwnProperty("data")); // 真 const データ = オブジェクト.データ; console.log(object.hasOwnProperty("data")); // 真 結論はJavaScript でオブジェクト プロパティを再定義する機能は、計算コストが高くなる可能性のある情報をキャッシュする独自の機会を提供します。アクセサー プロパティをデータ プロパティとして再定義して開始すると、プロパティが最初に読み取られるまで計算を延期し、結果をキャッシュして後で使用することが可能になります。このアプローチはクラスとオブジェクト リテラルの両方で機能し、ゲッターがプロトタイプに配置されるかどうかを心配する必要がないため、オブジェクト リテラルでは少し簡単になります。 パフォーマンスを向上させる最善の方法の 1 つは、同じ作業を繰り返し実行しないようにすることです。そのため、結果を後で使用するためにキャッシュできるときはいつでも、プログラムを高速化できます。遅延読み込みプロパティ パターンなどの手法を使用すると、任意のプロパティをキャッシュ レイヤーにしてパフォーマンスを向上させることができます。 上記は、JavaScript の遅延読み込み属性モードの詳細です。js の遅延読み込み属性の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: 10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ
>>: 更新とデータ整合性処理のためのMySQLトランザクション選択の説明
目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...
ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...
1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...
この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...
1. SQL インジェクションとは何ですか? SQL インジェクションは、入力パラメータに SQL ...
目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...
1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...
1. Dockerをインストールする yumでdockerをインストール #サービスを開始する sy...
目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...
最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...
この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...
<br />フレーム構造により、ブラウザの 1 ページに複数の Web ページを同時に表...
この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...