JSでのProxyの使い方を詳しく解説-jsチュートリアル-php.cn

JSでのProxyの使い方を詳しく解説

WBOY

リリース： 2024-02-19 08:06:22

オリジナル

1279 人が閲覧しました

JSでのProxyの使い方を詳しく解説

JS でのプロキシの使用の詳細な説明。具体的なコード例が必要です。

はじめに:
JavaScript では、プロキシは非常に強力で便利な機能です。これにより、ターゲットオブジェクトの操作をインターセプトしてカスタマイズするプロキシオブジェクトを作成できます。この記事では、Proxy オブジェクトの作成、インターセプト操作、実際の応用例など、Proxy の使い方を詳しく紹介します。

1. Proxy オブジェクトの作成
Proxy オブジェクトを作成するには、Proxy コンストラクターを使用できます。 Proxy コンストラクターは、ターゲットオブジェクトとハンドラーの 2 つのパラメーターを受け入れます。ターゲットオブジェクトはプロキシされるオブジェクトであり、ハンドラーは一連のインターセプトメソッドを含むオブジェクトです。

プロキシオブジェクトを作成する簡単な例を次に示します。

const target = {
  name: 'Alice',
  age: 25
};

const handler = {
  get: function(target, property) {
    console.log(`正在获取${property}`);
    return target[property];
  },
  set: function(target, property, value) {
    console.log(`正在设置${property}为${value}`);
    target[property] = value;
  }
};

const proxy = new Proxy(target, handler);

ログイン後にコピー

上記のコードでは、ターゲットオブジェクトを作成し、ハンドラオブジェクトをプロキシハンドラとして定義します。ハンドラーオブジェクトでは、ターゲットオブジェクトの操作をキャプチャおよび変更するインターセプトメソッドを定義できます。

2. インターセプト操作
プロキシを通じて、プロパティの取得 (get)、プロパティの設定 (set)、プロパティの削除 (deleteProperty)、関数の呼び出しなど、ターゲットオブジェクトのさまざまな操作をインターセプトして処理できます (適用する）など。一般的に使用されるインターセプトメソッドの例を次に示します。

get interception
get メソッドは、ターゲットオブジェクトの属性の取得操作をインターセプトするために使用されます:

const handler = {
  get: function(target, property) {
    console.log(`正在获取${property}`);
    return target[property];
  }
};

ログイン後にコピー

set インターセプト
set メソッドは、ターゲットオブジェクトのプロパティの設定操作をインターセプトするために使用されます。

const handler = {
  set: function(target, property, value) {
    console.log(`正在设置${property}为${value}`);
    target[property] = value;
  }
};

ログイン後にコピー

deleteProperty インターセプト
deleteProperty メソッドは、インターセプトするために使用されます。ターゲットオブジェクトのプロパティの削除操作:

const handler = {
  deleteProperty: function(target, property) {
    console.log(`正在删除${property}`);
    delete target[property];
  }
};

ログイン後にコピー

apply interception
apply メソッドは、ターゲットオブジェクトの関数呼び出し操作をインターセプトするために使用されます:

const handler = {
  apply: function(target, thisArg, args) {
    console.log(`正在调用函数${target.name}`);
    return target.apply(thisArg, args);
  }
};

ログイン後にコピー

3. 実際の応用例
プロキシの応用これは非常に幅広く、オブジェクトの機能を強化したり、データハイジャックを実装したりするために使用できます。以下に実際の応用例をいくつか示します。

データ検証
set メソッドをインターセプトすることで、属性を設定するときにデータ検証を実行できます。たとえば、年齢属性を設定する操作をインターセプトし、年齢が正当な値であることを確認できます。

const data = {
  name: 'Alice',
  age: 25
};

const handler = {
  set: function(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('年龄必须是一个数值');
    }
    target[property] = value;
  }
};

const proxy = new Proxy(data, handler);

proxy.age = '25';  // 抛出错误：年龄必须是一个数值

ログイン後にコピー

Cache
get メソッドをインターセプトすることで、オブジェクトをキャッシュして、繰り返し計算のコストを削減します。たとえば、円の面積を計算し、計算結果をキャッシュするオブジェクトを作成できます。

const cache = {};

const handler = {
  get: function(target, property) {
    if (property === 'area') {
      if (cache.area) {
        console.log('从缓存中获取面积');
        return cache.area;
      } else {
        const area = Math.PI * target.radius * target.radius;
        cache.area = area;
        return area;
      }
    }
    return target[property];
  }
};

const circle = new Proxy({ radius: 5 }, handler);

console.log(circle.area);  // 计算并缓存面积
console.log(circle.area);  // 从缓存中获取面积

ログイン後にコピー

結論:
プロキシは、JavaScript の非常に強力で実用的な機能です。ターゲットオブジェクトの操作をインターセプトしてカスタマイズします。 Proxyを適切に使用することで、データの検証やキャッシュなどのさまざまな機能を実装でき、JavaScriptの柔軟性と拡張性が大幅に向上します。

リファレンス: