【今更ES2015を追ってみるシリーズ 2】Proxy編 - 俺、サービス売って家買うんだ

不定期連載その2です。
今回はProxyについて調べたのでその辺を書きます。

前回の記事

【今更ES2015を追ってみるシリーズ 1】Promise編 - 俺、サービス売って家買うんだ

Proxyとは？

A proxy object is an exotic object whose essential internal methods are partially implemented using ECMAScript code.

出典：ECMAScript 2015 Language Specification – ECMA-262 6th Edition

Proxyオブジェクトはネイティブコードの一部をECMAScriptのコードで実装しなおしたオブジェクトです。つまりネイティブのコードをProxyを介して一部書き換えることができるということです。(英語表現ではtrapするというのがよく使われていますね。)

何のためにやるか？

BabelのLearn ES2015のページにを読むと目的は以下の様に書かれていました。
全ての対象はネイティブメソッド部分です。

interception
- native実装の関数に対して割り込み処理をいれる
object virtualization
- オブジェクの仮想化(getter/setter)
logging/profiling
- ログを仕込む
etc

Proxyが適応できるネイティブのメソッド

getPrototypeOf
setPrototypeOf
isExtensible
preventExtensions
getOwnPropertyDescriptor
has
get
set
deleteProperty
defineProperty
enumerate
ownKeys
apply
construct

functionもオブジェクトなのでapplyに対してProxyが使えます。

一例(object virtualization)

let handler = {
  set(target, prop, value, receiver) {
    if (prop === 'age' && value < 20) {
      throw new TypeError('Age must be over 20.');
    }

    target[prop] = value;
  }
}

let customer1 = new Proxy({name: 'Tanaka'}, handler);
let customer2 = new Proxy({name: 'Suzuki'}, handler);

customer1.age = 10; // TypeError: Age must be over 20.                                                                                      
customer2.age = 20;

ageのvalidationを含んだハンドラを作成しておきageのvalidationが必要なオブジェクトを作成するときにProxyを利用してsetterを定義します。

一例のソースコードを読み解く

let handler = {
  set(target, prop, value, receiver) {
  }
}

setの引数は以下の通りになります。

target
- new Proxyの第一引数
prop
- プロパティ名
value
- 例でいうcustomer1.ageに渡された値
receiver
- これはnew Proxyで返された後のcustomer1やcustomer2と===になる

よくわからなかったこと

まぁ、色々あるんですが笑

handler.enumerate() - JavaScript | MDN

let p = new Proxy({}, {
  enumerate(target) {
    console.log(""called);
    return ["a", "b", "c"][Symbol.iterator]();
  }
});

for (let x in p) { // "called"
  console.log(x);  // "a"
}                  // "b"
                   // "c"

上記リンクのMDNのページにfor..inをtrapする方法が載っています。handlerにenumerateを登録してProxyさせるのですがenumerateが返す値はiteratorでなければならないようです。

for..inのネイティブ実装がどうなってるのか調べていないので何故ここでiteratorを返さなければならないのか。
- 内部的にnextがコールされてるの？
for..inをtrapしてiteratorを返してループさせる利用ケースとは？
- はなからiteratableなオブジェクトを作ってfor..ofで回せばいいのではと。。

この辺がいまいちわからないですね。うーむ。