Proxy() コンストラクター

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.

Proxy() コンストラクターは Proxy オブジェクトを生成するために使用します。

構文

js
new Proxy(target, handler)

メモ: Proxy() は、new を使ってのみ構築することができます。new なしで呼び出そうとすると、TypeError が発生します。

引数

target

Proxy でラップするターゲットのオブジェクトです。あらゆる種類のオブジェクト、例えばネイティブ配列や関数、別のプロキシーなどがなることができます。

handler

関数をプロパティとして持つオブジェクトで、その関数で、 Proxy p に対して操作が行われた場合の挙動を定義します。

解説

Proxy() コンストラクターを使用すると、新しい Proxy オブジェクトを生成できます。 このコンストラクターは 2 つの必須の引数を取ります。

  • target はプロキシーを作成するオブジェクトです。
  • handler はプロキシーのカスタム動作を定義するオブジェクトです。

handler を空にすると、ほとんどすべての点でターゲットとまったく同じように振る舞うプロキシーを作成します。 handler オブジェクト上で関数群のいずれかを定義することで、プロキシーの動作の特定の側面をカスタマイズすることができます。例えば、 get() を定義することで、 ターゲットのプロパティアクセサーのカスタマイズされたバージョンを提供することができます。

ハンドラー関数

この節では、定義することができるすべてのハンドラー関数を列挙します。ハンドラー関数は、対象オブジェクトの呼び出しをトラップするので、トラップと呼ばれることがあります。

handler.apply()

関数呼び出しのトラップです。

handler.construct()

new 演算子のトラップです。

handler.defineProperty()

Object.defineProperty のトラップです。

handler.deleteProperty()

delete 演算子のトラップです。

handler.get()

プロパティ値の取得のトラップです。

handler.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor のトラップです。

handler.getPrototypeOf()

Object.getPrototypeOf のトラップです。

handler.has()

in 演算子のトラップです。

handler.isExtensible()

Object.isExtensible のトラップです。

handler.ownKeys()

Object.getOwnPropertyNamesObject.getOwnPropertySymbols のトラップです。

handler.preventExtensions()

Object.preventExtensions のトラップです。

handler.set()

プロパティ値の設定のトラップです。

handler.setPrototypeOf()

Object.setPrototypeOf のトラップです。

選択的にプロパティアクセサーのプロキシーを行う

この例では、ターゲットは notProxiedproxied の 2 つのプロパティを持っています。 proxied に別の値を返し、それ以外のアクセスをターゲットに許可するハンドラーを定義します。

js
const target = {
  notProxied: "original value",
  proxied: "original value",
};

const handler = {
  get(target, prop, receiver) {
    if (prop === "proxied") {
      return "replaced value";
    }
    return Reflect.get(...arguments);
  },
};

const proxy = new Proxy(target, handler);

console.log(proxy.notProxied); // "original value"
console.log(proxy.proxied); // "replaced value"

仕様書

Specification
ECMAScript Language Specification
# sec-proxy-constructor

ブラウザーの互換性

BCD tables only load in the browser

関連情報