Proxy and Reflect | Frontend Practical Guide

概要

Proxy はオブジェクトの基本操作（プロパティアクセス、代入、関数呼び出し等）をトラップで傍受・カスタマイズできます。Reflect は対応する標準メソッドを提供します。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`Proxy`	49	12	18	10	49	10
`Proxy.Proxy` Proxy() コンストラクターは Proxy オブジェクトを生成します。	49	12	18	10	49	10
`Proxy.handler.apply` handler.apply() メソッドは、オブジェクトの [[Call]] 内部メソッドに対するトラップです。関数呼び出しなどの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.construct` handler.construct() メソッドは、オブジェクトの [[Construct]] 内部メソッドに対するトラップです。Operators/new 演算子などの操作で使用されます。結果としてのプロキシーオブジェクトが new 演算子を使用できるようにするためには、プロキシーを初期化するために使用されるターゲット自体が有効なコンストラクターである必要があります。	49	12	18	10	49	10
`Proxy.handler.defineProperty` handler.defineProperty() は、オブジェクトの [[DefineOwnProperty]] 内部メソッドに対するトラップです。Object.defineProperty() などの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.deleteProperty` handler.deleteProperty() メソッドは、オブジェクトの [[Delete]] 内部メソッドに対するトラップです。 Operators/delete などの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.get` handler.get() は、オブジェクトの [[Get]] 内部メソッドに対するトラップです。プロパティアクセサーなどの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.getOwnPropertyDescriptor` handler.getOwnPropertyDescriptor() は、オブジェクトの [[GetOwnProperty]] 内部メソッドに対するトラップです。Object.getOwnPropertyDescriptor() などの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.getPrototypeOf` handler.getPrototypeOf() メソッドは、オブジェクトの [[GetPrototypeOf]] 内部メソッドに対するトラップです。Object.getPrototypeOf() などの操作で使用されます。	49	79	49	10	49	10
`Proxy.handler.has` handler.has() は、オブジェクトの [[HasProperty]] 内部メソッドに対するトラップです。Operators/in 演算子などの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.isExtensible` handler.isExtensible() は、オブジェクトの [[IsExtensible]] 内部メソッドに対するトラップです。Object.isExtensible() などの操作で使用されます。	49	12	31	10	49	10
`Proxy.handler.ownKeys` handler.ownKeys() メソッドは、オブジェクトの [[OwnPropertyKeys]] 内部メソッドに対するトラップです。 Object.keys(), Reflect.ownKeys() などの操作で使用されます。	49	12	18	10	49	10
`Proxy.handler.preventExtensions` handler.preventExtensions() はメソッドは、オブジェクトの [[PreventExtensions]] 内部メソッドに対するトラップです。 Object.preventExtensions() のような操作で使用されます。	49	12	22	10	49	10
`Proxy.handler.set` handler.set() メソッドは、オブジェクトの [[Set]] 内部メソッドに対するトラップであり、プロパティアクセサーを使用してプロパティの値を設定する操作に使われます。	49	12	18	10	49	10
`Proxy.handler.setPrototypeOf` handler.setPrototypeOf() メソッドは、オブジェクトの [[SetPrototypeOf]] 内部メソッドに対するトラップです。 Object.setPrototypeOf() などの操作で使用されます。	49	12	49	10	49	10
`Proxy.revocable` Proxy.revocable() メソッドは、取り消し可能な Proxy オブジェクトを作成するために使用します。	63	12	34	10	63	10
その他
`javascript.builtins.Reflect` Reflect 名前空間オブジェクトには、介入可能な JavaScript オブジェクトの内部メソッドを呼び出すための静的メソッドが含まれています。これらのメソッドは、プロキシハンドラーのものと同一です。	49	12	42	10	49	10
ビルトインオブジェクト
`Reflect.apply` Reflect.apply() は静的メソッドで、指定された引数とともに対象となる関数を呼び出します。	49	12	42	10	49	10
`Reflect.construct` Reflect.construct() は静的メソッドで、Operators/new 演算子のように、ただし関数として動作します。これは new target(...args) の呼び出しと同等です。さらに、別の new.target 値を指定することもすることができます。	49	12	42	10	49	10
`Reflect.defineProperty` Reflect.defineProperty() は静的メソッドで、Object.defineProperty() と似ていますが、論理値 (Boolean) を返します。	49	12	42	10	49	10
`Reflect.deleteProperty` Reflect.deleteProperty() は静的メソッドで、Operators/delete 演算子と同様に実装されていますが、関数として動作します。オブジェクトからプロパティを削除します。	49	12	42	10	49	10
`Reflect.get` Reflect.get() は静的メソッドで、プロパティアクセサー構文と同様に実装されていますが、関数として存在します。	49	12	42	10	49	10
`Reflect.getOwnPropertyDescriptor` Reflect.getOwnPropertyDescriptor() は静的メソッドで、Object.getOwnPropertyDescriptor() と似ています。オブジェクトに指定されたプロパティが存在する場合、そのプロパティ記述子を返します。存在しない場合は undefined を返します。	49	12	42	10	49	10
`Reflect.getPrototypeOf` Reflect.getPrototypeOf() は静的メソッドで、Object.getPrototypeOf() とほぼ同じメソッドです。これは指定したオブジェクトのプロトタイプを返します。	49	12	42	10	49	10
`Reflect.has` Reflect.has() は静的メソッドで、in 演算子と似ていますが、関数として存在します。	49	12	42	10	49	10
`Reflect.isExtensible` Reflect.isExtensible() は静的メソッドで、これは Object.isExtensible() に似ています。これはオブジェクトが拡張可能であるか（オブジェクトに追加された新しいプロパティを持てるかどうか）を判断します。	49	12	42	10	49	10
`Reflect.ownKeys` Reflect.ownKeys() は静的メソッドで、target オブジェクトが持つプロパティキーの配列を返します。	49	12	42	10	49	10
`Reflect.preventExtensions` Reflect.preventExtensions() は静的メソッドで、Object.preventExtensions() に似ています。すでにプロパティが追加されたオブジェクトに、新しいプロパティを抑制します (つまり、オブジェクトのさらなる拡張を抑制します)。	49	12	42	10	49	10
`Reflect.set` Reflect.set() は静的メソッドで、プロパティアクセサーおよび代入構文に似ていますが、関数として実装されています。	49	12	42	10	49	10
`Reflect.setPrototypeOf` Reflect.setPrototypeOf() は静的メソッドで、Object.setPrototypeOf() と同様ですが、論理値 (Boolean) を返す点が異なります。指定されたオブジェクトのプロトタイプ（すなわち内部の [[Prototype]] プロパティ）を設定します。	49	12	42	10	49	10

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const handler = {
  get(target, prop) {
    return prop in target ? target[prop] : `${prop} is undefined`;
  },
  set(target, prop, value) {
    if (typeof value !== 'number') throw TypeError('Only numbers allowed');
    target[prop] = value;
    return true;
  }
};

const obj = new Proxy({}, handler);
obj.x = 42;    // OK
obj.missing;   // 'missing is undefined'

ライブデモ

Proxy Basics

Object. operation inta-sept.get / set trap definition. with Proxy

プレビュー全画面表示

valid-tion withobject

Set trap in value. Verification implementation.

プレビュー全画面表示

Reflect API

Objectoperation functionization.Proxy and combinationuse. with Reflect

プレビュー全画面表示

実務での使いどころ

Proxy and Reflect の活用

オブジェクトの操作をインターセプトする Proxy と、オブジェクト操作の標準メソッドを提供する Reflect。

注意点

特になし。すべての主要ブラウザで安定して動作する。

参考リンク

Powered by web-features

概要

対応ブラウザ

基本構文

ライブデモ

Proxy Basics

valid-tion withobject

Reflect API

実務での使いどころ

Proxy and Reflect の活用

注意点

アクセシビリティ

参考リンク