JavaScript の遅延読み込み属性パターンを理解する

JavaScript の遅延読み込み属性パターンを理解する

従来、開発者はインスタンスで必要になる可能性のあるデータに対して JavaScript クラス内にプロパティを作成します。コンストラクターですぐに利用できる小さなデータの場合、これは問題ではありません。ただし、インスタンスで使用できるようになる前にデータを計算する必要がある場合は、その料金を前払いしたくない場合があります。たとえば、次のクラスを考えてみましょう。

クラス MyClass {
    コンストラクタ() {
        this.data = someExpensiveComputation();
    }
}

ここでは、いくつかの高価な計算を実行した結果としてdataプロパティが作成されます。プロパティが使用されるかどうかわからない場合は、事前にその計算を実行するのは効率的ではない可能性があります。幸いなことに、これらのアクションを後回しにする方法はいくつかあります。

オンデマンド属性モード

高価な操作の実行を最適化する最も簡単な方法は、計算を実行する前にデータが必要になるまで待つことです。たとえば、次のように、ゲッター付きのアクセサー プロパティを使用して、オンデマンドで計算を行うことができます。

クラス MyClass {
    データを取得する() {
        someExpensiveComputation() を返します。
    }
}

この場合、誰かがそのdata属性を初めて読み取るまで、コストのかかる計算は行われません。これは改善点です。ただし、 data属性が読み取られるたびに同じ高価な計算が実行されるため、少なくとも計算が 1 回しか実行されなかった前の例よりも状況は悪化します。これは良い解決策ではありませんが、これを基にしてより良い解決策を作り出すことができます。

面倒な遅延読み込みプロパティパターン

プロパティにアクセスしたときにのみ計算を実行するのが良いスタートです。本当に必要なのは、その時点以降の情報をキャッシュし、キャッシュされたバージョンのみを使用することです。しかし、この情報を簡単にアクセスできるようにキャッシュする場所はどこでしょうか?これを行う最も簡単な方法は、次のように、同じ名前のプロパティを定義し、その値を計算されたデータに設定することです。

クラス MyClass {
    データを取得する() {
        実際のデータ = someExpensiveComputation();
 
        Object.defineProperty(this, "データ", {
            値: 実際のデータ、
            書き込み可能: false、
            設定可能: false、
            列挙可能: false
        });
 
        実際のデータを返します。
    }
}

ここで、 dataプロパティはクラスのゲッターとして再度定義されますが、今回は結果がキャッシュされます。 Object.defineProperty()を呼び出すと、 actualDataという固定値を持ち、書き込み不可、構成可能、および列挙不可 (ゲッターと一致するように) に設定されたdataという新しいプロパティが作成されます。その後、値自体が返されます。次にdataプロパティにアクセスするときは、ゲッターを呼び出す代わりに、新しく作成されたプロパティから読み取ります。

const オブジェクト = 新しい MyClass();
 
// ゲッターを呼び出す
定数 data1 = オブジェクト.data;
 
// データプロパティから読み取ります
オブジェクトのデータを返します。

実際、すべての計算はdata属性が最初に読み取られたときにのみ実行されます。 dataプロパティのその後の各読み取りでは、キャッシュされたバージョンが返されます。

このパターンの欠点の 1 つは、 dataプロパティが列挙不可能なプロトタイプ プロパティとして始まり、列挙不可能な独自のプロパティとして終了することです。

const オブジェクト = 新しい MyClass();
console.log(object.hasOwnProperty("data")); // 偽
 
const データ = オブジェクト.データ;
console.log(object.hasOwnProperty("data")); // 真

この区別は多くの場合重要ではありませんが、オブジェクトを渡すときに微妙な問題が発生する可能性があるため、このパターンを理解することが重要です。幸いなことに、この問題は更新されたモデルを使用すれば簡単に修正できます。

クラスのプロパティを遅延読み込みするパターン

遅延ロードされたプロパティが常にインスタンス内に存在することが重要であるユースケースがある場合は、 Object.defineProperty()を使用してクラス コンストラクターでプロパティを作成できます。前の例よりも少し複雑ですが、プロパティがインスタンスにのみ存在するようになります。次に例を示します。

クラス MyClass {
    コンストラクタ() {

        Object.defineProperty(this, "データ", {
            得る() {
                実際のデータ = someExpensiveComputation();

                Object.defineProperty(this, "データ", {
                    値: 実際のデータ、
                    書き込み可能: false、
                    設定可能: false
                });

                実際のデータを返します。
            },
            設定可能: true、
            列挙可能: true
        });

    }
}

ここで、コンストラクターdata Object.defineProperty()を使用します。プロパティはインスタンス上に作成され ( thisを使用して)、ゲッターを定義し、プロパティが列挙可能で構成可能であることを指定します (独自のプロパティの典型)。 Object.defineProperty()を再度呼び出せるように、 dataプロパティを構成可能にすることが特に重要です。

次に、ゲッター関数は計算を実行し、 Object.defineProperty()を再度呼び出します。 data属性は、特定の値を持つデータ属性として再定義され、最終データを保護するために書き込み不可および構成不可になりました。計算されたデータはゲッターから返されます。次にdataプロパティが読み取られるときには、保存された値が読み取られます。ボーナスとして、 dataプロパティは独自のプロパティとしてのみ存在するようになり、最初の読み取りの前後で同じように動作します。

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • js で遅延読み込みを実装するいくつかの方法の詳細な説明
  • JS 同期、非同期、遅延読み込みメソッド
  • JS を使用してファースト スクリーン以外の画像の遅延読み込みを実装する例
  • 複数の画像の遅延読み込み効果を実現する js
  • js で遅延読み込みを実装するいくつかの方法

<<:  10分でDockerを使ったマイクロサービスのデプロイ方法を学ぶ

>>:  更新とデータ整合性処理のためのMySQLトランザクション選択の説明

推薦する

MySQL初心者はグループ化や集計クエリの煩わしさから解放されます

目次1. グループクエリの概略図2. groupbyキーワード構文の詳細な説明3. 簡単なグループク...

W3C チュートリアル (11): W3C DOM アクティビティ

ドキュメント オブジェクト モデル (DOM) は、プログラムがドキュメントのコンテンツ、構造、およ...

JavaScript axiosのインストールとパッケージ化のケースの詳細な説明

1. axiosプラグインをダウンロードする cnpm インストール axios -S 2. mai...

CSS 動的高さ遷移アニメーション効果の実装

この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...

SQL インジェクションの詳細

1. SQL インジェクションとは何ですか? SQL インジェクションは、入力パラメータに SQL ...

MySQL シリーズ 6 のユーザーと認証

目次チュートリアルシリーズ1. ユーザー管理1. ユーザーアカウント2. アカウントの追加と削除3....

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

CSSスクロールバーのスタイルをカスタマイズする方法の詳細な説明

この記事では、CSS スクロールバー セレクターを紹介し、Webkit ブラウザーと IE ブラウザ...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

Docker+K8S クラスタ環境構築と分散アプリケーション展開

1. Dockerをインストールする yumでdockerをインストール #サービスを開始する sy...

Node+Express テストサーバーのパフォーマンス

目次1 テスト環境1.1 サーバーハードウェア1.1.1 t2.マイクロ1.1.2 c5.large...

vmware workstation12 インストール CentOS プロンプト VMware Player と Device/Credential Guard に互換性がない、理由と解決策

最新バージョンの WIN10 では、Microsoft は仮想化コンテナに基づくセキュリティ メカニ...

CentOS はローカル yum ソースを使用して LAMP 環境を構築するグラフィック チュートリアル

この記事では、ローカル yum ソースを使用して CentOS 上に LAMP 環境を構築する方法に...

XHTML 入門チュートリアル: フレーム タグの使用

<br />フレーム構造により、ブラウザの 1 ページに複数の Web ページを同時に表...

WeChatアプレットがテキストスクロールを実装

この記事の例では、WeChatアプレットでテキストスクロールを実装するための具体的なコードを参考まで...