JavaScriptにおけるProxyについて使い方メモ

Proxyってなんだっけ

Proxyはオブジェクトの振る舞いをカスタマイズするための仕組み。
ES6で追加された。

例えば、Proxyを使ったこんなコードを考えてみる。

const originalObj = {
  message1: 'hello',
  message2: 'everyone'
}

const handler = {
  get: function (target, prop, receiver) {
    if (prop === 'message2') {
      return 'world'
    }

    return Reflect.get(...arguments)
  }
}

const proxyObj = new Proxy(originalObj, handler)

この時、オリジナルのオブジェクトのmessage2プロパティはeveryoneを返す。

// 'everyone'
console.log(originalObj.message2)

一方で、Proxyを使ったオブジェクトのmessage2プロパティはworldを返す。

// 'world'
console.log(proxyObj.message2)