handler.set()

Baseline Widely available

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

handler.set() メソッドは、オブジェクトの [[Set]] 内部メソッドに対するトラップであり、プロパティアクセサーを使用してプロパティの値を設定する操作に使われます。

試してみましょう

const monster = { eyeCount: 4 };

const handler = {
  set(obj, prop, value) {
    if (prop === "eyeCount" && value % 2 !== 0) {
      console.log("Monsters must have an even number of eyes");
    } else {
      return Reflect.set(...arguments);
    }
  },
};

const proxy = new Proxy(monster, handler);

proxy.eyeCount = 1;
// 予想される結果: "Monsters must have an even number of eyes"

console.log(proxy.eyeCount);
// 予想される結果: 4

proxy.eyeCount = 2;
console.log(proxy.eyeCount);
// 予想される結果: 2

構文

js
new Proxy(target, {
  set(target, property, value, receiver) {
  }
})

引数

次の引数は set() メソッドに渡されます。this はハンドラーにバインドされます。

target

ターゲットオブジェクトです。

property

文字列または Symbol で、プロパティ名を表します。

value

設定するプロパティの新しい値です。

receiver

セッターの this 値。 Reflect.set() を参照。これは通常、プロキシー自体またはプロキシーから継承したオブジェクトです。

返値

set() メソッドは、代入が成功したかどうかを示す論理値 (Boolean) を返す必要があります。それ以外の値は論理値に変換されます。

多くの操作（厳格モードでのプロパティアクセサーの使用が含まれます）は、 [[Set]] 内部メソッドが false を返した場合、TypeError が発生します。

解説

介入

このトラップは下記の操作に介入できます。

プロパティへの代入: proxy[foo] = bar や proxy.foo = bar
Reflect.set()

他にも、[[Set]] 内部メソッドを呼び出すあらゆる操作に介入できます。

不変条件

プロキシーの [[Set]] 内部メソッドにおいて、ハンドラーの定義が次のいずれかの不変条件に違反する場合、TypeError が発生します。

プロパティの値が、対応する対象とするオブジェクトのプロパティの値と異なる値に変更できません。ただし、対応する対象とするオブジェクトのプロパティが、書き込み不可かつ構成不可の自分自身でデータプロパティである場合に限ります。つまり、Reflect.getOwnPropertyDescriptor() が target のプロパティに対して configurable: false, writable: false を返す場合、かつ value が target のプロパティ記述子内の value 属性と異なる場合、トラップは偽値を返す必要があります。
対応する対象オブジェクトのプロパティが、設定不可の自己アクセサープロパティであり、そのセッターが未定義で設定されている場合、そのプロパティの値を設定できません。つまり、Reflect.getOwnPropertyDescriptor() が target のプロパティに対して configurable: false, set: undefined を返す場合、トラップは偽値を返す必要があります。

例

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

次のコードではプロパティの値の設定をトラップします。

js
const p = new Proxy(
  {},
  {
    set(target, prop, value, receiver) {
      target[prop] = value;
      console.log(`property set: ${prop} = ${value}`);
      return true;
    },
  },
);

console.log("a" in p); // false

p.a = 10; // "property set: a = 10"
console.log("a" in p); // true
console.log(p.a); // 10