ES6で新に追加されたProxyについて、その概念や仕組みについての基礎編と、 様々な状況でのProxyの使い方についての活用編に分けてあります。
この基礎編は、Proxyの仕組み全体についてまとめたものです。 細部はECMAScriptの仕様文書でのランタイム仕様に基づいていて、 まったく手軽なものではありません。 むしろ、コード例で応用の仕方をまとめた活用編のほうが、 Proxyのもつ意味について認識しやすいかもしれません。
この文書を書くにあたって、Proxyについて自ら調査し、 Proxyの視点で単一の文書としてまとめていきました。 Proxyを調べていく時点で判明したのは、 ProxyというのはECMAScript内部のランタイム仕様に強く関わるものであり、 きちんと扱うには横断した仕様の解釈が必要となることです。 このために、(どのランタイム実装でも実装されてもいないmodulesを含めて) その他のES6機能にくらべて、文書が極端に少ない状況にあるのだと思われます。
Proxyは、ES6(ECMAScript2015)より追加されたビルトインオブジェクトです。
ブラウザ固有拡張にあった__proto__や__noSuchMethod__等による 動的な
オブジェクト実装の機能 を、標準仕様 として可能にするものです。
Promiseと違い、その実現には実行環境の支援が必要なしくみであり、
babel等のtranspilerやJavaScript実装の Polyfillでは、
完全なサポートができない ものです。
また、標準に組み込まれることでPromiseがJavaScriptによる
非同期プログラミングの標準モデルとなりつつあるように、
Proxy.revocableが標準に組み込まれている点から、
Proxyを用いた Object Capability によるアクセス制御モデルが
JavaScriptでの標準となっていくのかもしれません。
まずproxy = new Proxy(target, handler)の式で、Proxyオブジェクトが作られます。
ここで、以下の要素とその関係を軽くまとめておきます:
-
インスタンス: ここでは値ではないオブジェクト
null以外でtypeofで"object","function"になるもの全般"boolean"、"number"、"string"、"undefined"、"symbol"は値
-
Proxy :
new Proxyで生成されるインスタンス- 実行環境によるサポートが必然である例として、
new Proxy({}, {}) instanceof Proxyは必ずfalseになります
- 実行環境によるサポートが必然である例として、
-
Target: Proxyのデフォルト実行の対象になるインスタンス
typeof演算子等でtargetの属性が用いられますproxy === targetは必ずfalseになります
-
Handler: Proxyインスタンスに対する各種インスタンスアクセスへのTrap群を 1つにまとめたインスタンス
- Trapの名前は、Handler上でのプロパティ名になります
-
Trap: 各インスタンスアクセスに対応した関数(
functionインスタンス)handler.has(target, name) {...}など
例として、console.log(proxy.member)という式が実行されると、
Trapのhandler.get(target, "member", proxy)として呼び出され、
このProxyを作るときに与えたHandler上のTrap handler.get()のコードが実行され、
その結果(戻り値、例外)が上記のproxy.member式の評価値へ反映される、
という関係になっています。
ProxyとともにES6で追加されたビルトインオブジェクトReflectは、
"Esential Internal Method"と呼ばれるエンジンの内部機能に
対応した13の関数を持つオブジェクトです。
Reflect.isExtensible(obj)=>[[IsExtensible]]()Reflect.preventExtensions(obj)=>[[PreventExtensions]]()Reflect.getPrototypeOf(obj)=>[[GetPrototypeOf]]()Reflect.setPrototypeOf(obj, proto)=>[[SetPrototypeOf]](V)Reflect.getOwnPropertyDescriptor(obj, name)=>[[GetOwnProperty]](P)Reflect.defineProperty(obj, name, desc)=>[[DefineOwnProperty]](P, Desc)Reflect.get(obj, name, receiver)=>[[Get]](P, Rceiver)Reflect.set(obj, name, value, receiver)=>[[Set]](P, V, Receiver)Reflect.has(obj, name)=>[[HasProperty]](P)Reflect.onwKeys(obj)=>[[OwnPropertyKeys]]()Reflect.apply(func, thisArg, args)=>[[Call]](thisArgument, argumentsList)Reflect.construct(func, args, newTarget)=>[[Construct]](argumentList, newTarget)
Essential Internal Methodはstringなどの値にも存在しますが、
Reflectの関数はインスタンスに対してのみ利用が可能です。
ProxyでTrapが存在しないHandlerのデフォルトは、
Targetに対してそのTrapに対応するEssential Internal Methodを実行するものです。
よってReflectは、
ProxyのデフォルトのTrap実装 を集めたオブジェクトとも言えます。
- すなわち
new Proxy({}, {})とnew Proxy({}, Reflect)は、 すべて同じProxy処理を行います
メタプログラミングとしてES5追加のObject付属関数が有用であるように、
Proxy抜きであってもReflect単独で有用です。
Reflectの関数は、 ES5でのObjectに付随したメタプログラミング用関数群と似ているが、 細かい点に違いがあります- 違いとしては、失敗時に、エラーを投げるか、戻り値でfalseを返すか、
ES6の
Symbolも扱う、など Object.getOwnPropertyNames(obj)とReflect.ownKeys(obj)、Object.defineProperty(obj, name, desc)とReflect.defineProperty(obj, name, desc)など
- 違いとしては、失敗時に、エラーを投げるか、戻り値でfalseを返すか、
ES6の
ES6新規の構造にも対応している点から、
ES6環境であればObject付属の関数から、Reflect付属の同種の関数に
置き換えるのもよいでしょう。
また、func.apply()は、内部で[[Call]]を呼び出す実装のメソッドであり
インスタンスで上書きすることも可能です。Reflect.apply(func)を使えば、
上書きされていても直接的に[[Call]]を起動できます。
ProxyのTrapでは、ただtargetをReflect経由で各デフォルト処理へ
転送する以外にも、差し替えや仮想的な属性があるかのように見せかけるなどの
様々なことが可能です。
ただしProxyのTrapでは、どんなことでも可能になるわけではなく、 Target側で制約が設定される ことによって、 Trapで可能な結果が制限される ようになっています。
以下は、その制約の元になる情報です:
-
Object.isExtensibile(target): これがfalseのとき、Trap実行では、targetに対するデフォルトの結果と くらべて違いが出るような結果を返すことができない- ES5で追加されたオブジェクトの属性変更を制限するビルトイン
関数
Object.freeze(o)、Object.seal(o)、Object.preventExtensions(o)のいずれかが適用されると、Object.isExtensible(o)はfalseになる
- ES5で追加されたオブジェクトの属性変更を制限するビルトイン
関数
-
desc.configurable:Object.defineProperty等で各プロパティに設定する プロパティデスクリプタでのメンバーのconfigurableがfalseのとき、 プロパティに関するTrapでは、その名前のプロパティに対してはtargetに対する 結果とくらべて違いが出る結果を返すことができない- ES5の時点で、
configurableがfalseの時、同一オブジェクトだけでなく、 そのオブジェクトをプロトタイプとして持つオブジェクトに対してもObject.defineProperty()等ができなくなる - この考えが、TargetとProxyのあいだの関係にも拡大された感じ
- ES5の時点で、
-
desc.writable: プロパティデスクリプタのwritableがfalseのとき、getTrapとsetTrapでは、その名前のプロパティに対してはtargetに対する結果とくらべて違いが出るような結果を返すことができないfalseのとき、getTrapでtargetでの値と違う値は返せないfalseのとき、setTrapでfalseを返さなくてはいけない
Trapでこれらの制約に違反した結果を返す実装をすると、
Trapが発動する操作がProxyに対して行われたとき、
(strict modeいかんにかかわらず)ProxyからTypeErrorが発生します。
ECMAScriptにおいてTypeErrorとは、実行時に、
各構文やビルトイン関数と、そこで扱う値とのあいだで、
なんらかの不整合がある場合全般で発生する例外です。
各Essential Internal Methodにおける具体的な制約の条件は、 ECMAScript仕様では、 "6.1.7.3 Invariants of the Essential Internal Methods" および "9.5 Proxy Object Internal Methods and Internal Slots" に記載されています。
注意したいのは、デフォルトTrap実装がそうであるというだけであり、
Trap実装の中でアクセス対象にするインスタンスを
new Proxyでのtargetとして設定する必然性はあまりありません。
制約からの制限を外したければ、targetには{}やfunction () {}など、
同種で無制約のままのインスタンスを渡し、各Trapでtargetは無視して、
制約されたオブジェクトに対してアクセスさせればよいだけです。
このため、このTargetの制約の継承は、 制約設定をProxyで活用するために活用することになるのではないしょうか。
たとえば、Object.keys(obj)がどうProxyに影響するかを調べましょう。
Object.keysは、仕様では、"19.1.2.14 Object.keys ( O )"にあります。
その中で"7.3.21 EnumerableOwnNames (O)"が参照され、
そこの2でEssential Internal MethodのO.[[OwnPropertyKeys]]()が参照されており、
ProxyからownKeys Trapが呼び出されます。
そして、この下4にO.[[GetOwnProperty]](key)があることを忘れてはいけません。
ここでProxyからgetOwnPropertyDescriptor Trapが呼び出され、
その結果がundefinedでなく、enumerableがtrueである場合に
keyが結果であるnamesリストに追加される、と書いてあります。
5では、namesの順序を、"13.7.5.15 EnumerateObjectProperties (O)"での順序
と同じにすることが記載されています。
ここから、Object.keysに作用させるProxyを作るには、
ownKeys Trapでリストを返すだけでなく、getOwnPropertyDescriptor Trapで
リスト中の名前に対してenumerableがtrueになるプロパティデスクリプタを
返す必要もあります。
そして、さらに呼び出されるProxyの各Trapの条件もチェックします。
"9.5.11 OwnPropertyKeys ( )" のNOTEに条件がまとめられています。
- Targetの各
keyでのプロパティデスクリプタのconfigurableがfalseなとき、Trapの結果にそのkeyが含まれていなければTypeError IsExtensible(target)がfalseの場合、Targetのプロパティリストと Trapの結果との間に過不足があったらTypeError
また、"9.5.5 GetOwnProperty (P)"のNOTEを見ると、
- Targetのデスクリプタが
configurableがfalseの場合、undefinedを返すとTypeError IsExtensible(target)がfalseの場合、Targetのデスクリプタが存在する場合undefinedを返すとTypeErrorIsExtensible(target)がfalseの場合、Targetのデスクリプタが存在しない場合、 デスクリプタを返すとTypeError- Targetのデスクリプタが存在しないか、
デスクリプタの
configurableがtrueの場合、configurableがfalseのデスクリプタを返すとTypeError
つまり、enumerableがtrueなデスクリプタを返すには、
この最後の条件も満たす必要があるのです。
最終的にこれらをまとめると、Object.keys(proxy)でObject.keys(target)
に存在しないプロパティを返すためには、
以下の3条件を満たすようTrapを実装する必要があることが判明します:
Reflect.isExtensible(target)がtrueであることownKeysTrapで返す各プロパティについて、Targetのデスクリプタが 存在してる場合に、そのconfigurableがfalseでないことownKeysTrapで返す各プロパティについて、getOwnPropertyDescriptorTrapでは以下の内容のデスクリプタを返すことenumerableがtrueであることconfigurableがtrueであること
このように、Proxyに対する仕様の読み方としては、 ProxyのTrapが発動するビルトインや構文の"Runtime Semantics"を起点に、 内部仕様をたぐってくことになります。
また、上記でenumerableがtrueのデスクリプタを返すためには
別の条件からconfigurableもtrueにしなくてはいけないように、
複数の仕様から導かれる条件が生まれることにも注意する必要があります。
以下のコードは、Handlerインスタンスの全13 Trapを、 5カテゴリに分けて列挙したものです:
const handler = {
//[define proxy extensibility]
isExtensible(target) {//=> bool (extensible or not)
return Reflect.isExtensible(target);
},
preventExtensions(target) {//=> bool (block extending or not)
return Reflect.preventExtensions(target);
},
//[access target.constructor.prototype]
getPrototypeOf(target) {//=> prototype object
return Reflect.getPrototypeOf(target);
},
setPrototypeOf(target, proto) {//=> bool (success or not)
return Reflect.setPrototypeOf(target, proto);
},
//[configure properties]
getOwnPropertyDescriptor(target, name) {//=> descriptor object (or undefined)
return Reflect.getOwnPropertyDescriptor(target, name);
},
defineProperty(target, name, desc) {//=> bool (success or not)
return Reflect.defineProperty(target, name, desc);
},
//[basic property access]
get(target, name, receiver) {//=> value
return Reflect.get(target, name, receiver);
},
set(target, name, value, receiver) {//=> bool (success or not)
return Reflect.set(target, name, value, receiver);
},
deleteProperty(target, name) {//=> bool (success or not)
return Reflect.deleteProperty(target, name);
},
has(target, name) {//=> bool
return Reflect.has(target, name);
},
ownKeys(target) {//=> [name]
return Reflect.ownKeys(target);
},
//[proxy as functions] (required `typeof target === "function"`)
apply(target, thisArg, args) {//=> value (result as function)
return Reflect.apply(target, thisArg, args);
},
construct(target, args, newTarget) {//=> object instance
return Reflect.construct(target, args, protoCtor);
},
};以下は、各Trapと、それが発動する代表的な式や構文との関係です:
-
handler.isExtensible(target)Object.isExtensible(proxy)Object.isSealed(proxy)Object.isFrozen(proxy)
-
handler.preventExtensions(target)Object.preventExtensions(proxy)Object.seal(proxy)Object.freeze(proxy)
-
handler.getPrototypeOf(target)proxy instanceof ConstructorObject.getPrototypeOf(proxy)proxy.__proto__,proxy.valueOf(), (handler.getで差し替えてない場合)Object.create(proxy)、Object.assign(proxy)
-
handler.setPrototypeOf(target, proto)Object.setPrototypeOf(proxy, proto)proxy.__proto__ = proto(handler.setで差し替えてない場合)
-
handler.getOwnPropertyDescriptor(target, name)Object.getOwnPropertyDescriptor(proxy, name)proxy.valueOf(), (handler.getで差し替えてない場合)Object.create(proxy)、Object.assign(proxy)
-
handler.defineProperty(target, name, desc)Object.defineProperty(proxy, name, desc)Object.defineProperties(proxy, descs)
-
handler.get(target, name, receiver)proxy.name,proxy[name],proxy.name(),proxy[name]()(および、属性参照をするビルトイン:Object.assign({}, proxy), ...)- (destructuring)
let {name} = proxy; proxy.valueOf(),proxy[Symbol.toPrimitive]を内部で駆動する各種の演算子:+proxy,proxy == true,proxy * 10, ...
-
handler.set(target, name, value, receiver)proxy.name = value,proxy[name] = value(および、属性代入をするビルトイン:Object.assign(proxy, {foo:1}), ...)
-
handler.deleteProperty(target, name)delete proxy.name,delete proxy[name]Object.deleteProperty(proxy, name)
-
handler.has(target, name)name in proxy
-
handler.ownKeys(target)Object.getOwnPropertyNames(proxy)Object.getOwnPropertySymbols(proxy)for (name in proxy) {...}(注: 要デスクリプタでenumerable)Object.keys(proxy)(注: 要デスクリプタでenumerable)
-
handler.apply(target, thisArg, args)proxy(...args)({m: proxy}).m(...args)proxy.apply(thisArg, args)proxy.call(thisArg, ...args)
-
handler.construct(target, args, newTarget)new proxy(...args)
また、Reflectの同名関数をProxyに対して呼び出すと、
第二引数以降が同じ値となって、Trapが発動します。
ただし、デフォルト値は、Reflectの関数呼び出し時でのデフォルト値が
渡ります。
Reflect.get(proxy, name, value, obj)=>handler.get(target, name, value, obj)Reflect.get(proxy, name, value)=>handler.get(target, name, value, proxy)Reflect.construct(proxy, [], func)=>handler.construct(target, [], func)Reflect.construct(proxy, [])=>handler.construct(target, [], proxy)
そして以下の式に対しては、ProxyからTrapは発動しません:
typeof proxytypeof targetの結果がそのまま使われる
proxy === value,proxy !== value- 通常のオブジェクトとしての同一性で、Proxyインスタンスの同一性を評価する
p = new Proxy(t, h); p === pnew Proxy(t, h) !== new Proxy(t, h)new Proxy(t, h) !== t
ここは、各Trapの引数や戻り値について、誤解しやすい点に注目したものです。
Trapの戻り値がbool (success or not)である、いうのは、
falseを返すと、(strict modeのとき)Proxyアクセスした側で
TypeErrorを発生させることを意味します。
const proxy = new Proxy({}, {
set(target, name, value, receiver) {
return false;
}
});
(function () {
"use strict";
proxy.foo = "foo"; //throw> TypeError
})();Targetに対して実際に同種の処理を適用して成功したかどうかのことではありません。
const proxy = new Proxy({}, {
set(target, name, value, receiver) {
return true;
}
});
(function () {
"use strict";
proxy.foo = "foo"; //(pass silently)
console.log(proxy.foo); //=> undefined
})();引数のnameはstringかsymbolです。
symbol以外はすべてstring化されます。
targetがArrayのインデックスアクセスであってもnumberにはなりません。
const proxy = new Proxy([], {
get(target, name, receiver) {
return typeof name;
}
});
console.log(proxy[0]); //=> string
console.log(proxy[null]); //=> string
console.log(proxy[undefined]); //=> string
console.log(proxy[{}]); //=> string
console.log(proxy[new String("key")]); //=> string
console.log(proxy[Symbol("key")]); //=> symbolgetとsetの最後の引数のreceiverは、プロパティアクセスreceiver.property
の右のオブジェクトです。別の表現では、メソッド実行receiver.property()で、
thisとなるものです。普通はProxyになっているでしょう。
そうでない場合はたとえば、Proxyをプロトタイプにしたオブジェクトの
プロパティアクセスで、receiverはそのオブジェクトになります。
const target = {};
const proxy = new Proxy(target, {
get(target, name, receiver) {
return receiver;
}
});
console.log(proxy.foo === proxy); //=> true
console.log(proxy.foo !== target); //=> true
// proxy as a prototype
const obj = Object.create(proxy);
console.log(Reflect.getPrototypeOf(obj) === proxy); //=> true
console.log(obj.foo === obj); //=> true
console.log(obj.foo !== proxy); //=> truereceiverが重要なのは、プロパティがgetter/setterである時です。
receiverは、getter/setter関数の中で使うthisとなるものです。
const target = {value: 5};
Object.defineProperty(target, "prop", {
get() {
return this.value * 10;
}
});
// use proxy value
const proxy = new Proxy(target, {
get(target, name, receiver) {
if (name === "value") return 2;
return Reflect.get(target, name, receiver);
}
});
console.log(proxy.prop); //=> 20;
// use target value
const buggy = new Proxy(target, {
get(target, name) {
if (name === "value") return 2;
return Reflect.get(target, name);
}
});
console.log(buggy.prop); //=> 50;construct TrapのnewTargetは、
生成されたインスタンスのconstructorプロパティになるコンストラクタ関数です。
通常のnew呼び出しでは(getter/setterのreceiver同様に)proxyとなります。
const target = function Ctor() {};
const proxy = new Proxy(target, {
construct(target, args, newTarget) {
return {newTarget};
}
});
console.log(new proxy().newTarget === proxy); //=> true
console.log(new proxy().newTarget !== target); //=> trueまた、Reflect.construct(ctor, args, newTarget)を直接使うことで、自由に、
第三引数で(newが可能な)functionオブジェクトをセットすることもできます。
この場合ではctorが実行されたとき、その中でのthis.constructorがnewTargetに
なります(さらにnew.target式の値もnewTargetになります)。
単にconstructorプロパティにセットされるだけであって、
newTarget関数としては一切実行されません。
const ctor = function Ctor() {
this.newTarget = new.target;
};
console.log(Reflect.construct(ctor, []).newTarget === ctor); //=> true
const other = function Other() {
this.extra = true;
};
other.prototype.method = function () {
return "OK";
};
const obj = Reflect.construct(ctor, [], other);
console.log(obj.newTarget === other); //=> true
console.log(!(obj instanceof ctor)); //=> true
console.log(obj instanceof other); //=> true
console.log(obj.extra); //=> undefined
console.log(obj.method()); //=> "OK"handler.isExtensible(target): boolean (extensible or not)handler.preventExtensions(target): boolean (prevent or not)
isExtensible Trapは必ずReflect.isExtensible(target)と同じ値を
返さなくてはいけません。結果の差し替えが不可能です。
const proxy = new Proxy({}, {
isExtensible(target) {return false;}
});
Object.isExtensible(proxy); //throw> TypeErrorpreventExtensions Trapの戻り値は、falseだと「制約させられない」、
という意味になります。具体的にはObject.preventEextensions(proxy)等
を呼ぶとTypeErrorが出るようになります。
const proxy = new Proxy({}, {
preventExtensions(target) {
return false;
}
});
const o = Object.freeze(proxy); //throw> TypeErrorpreventExtensions Trapの戻り値を別の値にすることは、
isExtensible(target)がtrueのときに、targetにタッチせずfalseを返して
Object.preventExtensions等をできないようにする場合などです。
handler.getPrototypeOf(target): prototype object (or undefined)handler.setPrototypeOf(target, proto): boolean (success or not)
ブラウザ拡張実装由来で、ES6 Annex Bで追認された
インスタンスごとのプロトタイプ設定obj.__proto__の読み書きに相当する機能です。
obj.__proto__の読み書きの代わりに、Reflect.getPrototypeOf(obj)と
Reflect.setPrototypeOf(obj, proto)が使えます。
ただしobject.__proto__の実装はgetter/setterであり、その中で
getPrototypeOf(this)/setPrototypeOf(this, proto)が呼び出される仕様です。
Proxyオブジェクトへのproxy.__proto__アクセスは、
まず__proto__への
get(target, name, receiver)/set(target, name, value, receiver) Trapが
呼ばれ、デフォルトではそこでtargetのgetter/setterが取り出され、
receiverであるProxyをthisにして実行されます。
そこからgetPrototyoeOf(proxy)/setPrototyoeOf(proxy, proto)が呼ばれ、
それによって
handler.getPrototypeOf(target)/setPrototypeOf(target, proto) Trapが
呼び出される、という仕組みになります。
const proxy = new Proxy({}, {
getPrototypeOf(target) {
return new Date();
},
get(target, name, receiver) {
return Reflect.get(target, name, receiver);
}
});
console.log(proxy.__proto__ instanceof Date); //=> trueget/set Trapで最後の引数receiverを省略してしまうと、
receiverがtargetになり、
getPrototypeOf(target)/setPrototypeOf(target, proto)に直接
つながってしまい、
getPrototypeOf/setPrototypeOf Trapに届かなくなるので注意です。
const proxy = new Proxy({}, {
getPrototypeOf(target) {
return new Date();
},
get(target, name) {
return Reflect.get(target, name);
}
});
console.log(proxy.__proto__ instanceof Date); //=> falsehandler.getOwnPropertyDescriptor(target, name): descriptor object (or undefined)handler.defineProperty(target, name, desc): boolean (success or not)
ES5でのObject.getOwnPropertyDescriptor(obj, name)や
Object.defineProperty(obj, name, desc)に対応して呼び出されるTrapです。
Object.definePropertyの戻り値は設定したオブジェクト
またはTypeError発生ですが、
Reflect.definePropertyの戻り値はbooleanです。
あと注意点としては、configurableがfalseのときにReflect.defineProperty
実行が必ずfalseになるわけではなく、valueも含めて同じ値になる
デスクリプタであれば結果はtrueになります
(Object.definePropertyの成否と同じ)。
const obj = {};
Reflect.defineProperty(obj, "prop", {configurable: false, value: 100});
console.log(
Reflect.defineProperty(obj, "prop", {configurable: false, value: 100})
); //=> true
console.log(
Reflect.defineProperty(obj, "prop", {configurable: false, value: 10})
); //=> falseObject.getOwnPropertyDescriptorは数値や文字列に対しても正常として実行
しundefinedを返しますが、
Reflect.getOwnPropertyDescriptorはインスタンス以外に
対して行うとTypeErrorが発生します。
handler.has(target, name): booleanhandler.get(target, name, receiver): valuehandler.set(target, name, value, receiver): boolean (success or not)handler.deleteProperty(target, name): boolean (success or not)handler.ownKeys(target):Arrayof names
has Trapは、in演算子や、withにProxyをセットした時に
ブロック内での(let/const以外の)変数へのアクセス等で発動します。
const proxy = new Proxy({}, {
has(target, name) {
if (name === "console") return false;
console.log("[has]", name);
return true;
}
});
"foo" in proxy; //=> "[has] foo"
with (proxy) {
var bar = 100; //=> "[has] bar"
}get/set Trapでreceiverが存在するのは、プロパティがgetter/setter関数
な場合、その関数で使うthisとなるオブジェクトを受け取るためです。
Reflect.getやReflect.setでtargetにフォワードする場合では、
receiverがproxyになることで、targetのgetter/setter関数でのthisへの
プロパティアクセスから、さらにget/set Trapが発動されることになります。
ownKeys Trapのデフォルト実装であるReflect.ownKeys(obj)は、
以下の順でソートされたリストを返します:
- 非負整数値の文字列: 数値として昇順
- その他文字列: 追加順(chronological order)
- シンボル: 追加順
ただし、ownKeys Trapの戻り値としては、
この順で整列されていなくてもTypeErrorにならず、
Object.getOwnPropertyNames()等ではその順のままで処理されます。
またこの内容をObject.keys(proxy)やfor-inループで使用させる場合には、
返す名前に対応するプロパティデスクリプタでenumetableをtrueにして
返す実装も行う必要があります(さらにTargetに存在しないプロパティの場合は
configurableもtrueにする必要があります)。
const proxy = new Proxy({}, {
ownKeys(target) {return ["a", "bb", "ccc"];},
getOwnPropertyDescriptor(target, name) {
if (name.length % 2 === 1) return {
enumerable: true, configurable: true,
};
return undefined;
},
});
console.log(Object.keys(proxy)); //=> ["a", "ccc"]isExtensibleやdesc.configurableがfalseの場合、
追加や変更だけでなく、
Targetにあるプロパティの存在を隠蔽することも
許されない点にも注意が必要でしょう。
たとえば、enumerableなプロパティをownKeys Trapの結果から省くこと
が許されません。
handler.apply(target, thisArg, args): valuehandler.construct(target, args, newTarget): object
まず、これらのTrapを使う場合、Targetがfunctionオブジェクトである
必要があります(typeof target === "function"であること)。
const fproxy = new Proxy(() => {}, {
apply(target, thisArg, args) {
return "OK";
}
});
console.log(proxy()); //=> OK
const proxy = new Proxy({}, {
apply(target, thisArg, args) {
return "OK";
}
});
console.log(proxy()); //throw> TypeErrorさらに、construct Trapでは、Targetが、newでの使用が禁止される
Arrow Function(() => {}等)および
メソッド({method() {}}.method等)の場合は使えません(TypeError)。
const fproxy = new Proxy(function () {}, {
construct(target, args, newTarget) {
return {OK: true};
}
});
console.log(new fproxy());
const aproxy = new Proxy(() => {}, {
construct(target, args, newTarget) {
return {OK: true};
}
});
try {
console.log(new aproxy());
} catch (er) {
console.log(er.message); //=> TypeError
}
const o = {
method() {}
};
const mproxy = new Proxy(o.method, {
construct(target, args, newTarget) {
return {OK: true};
}
});
try {
console.log(new mproxy());
} catch (er) {
console.log(er.message); //=> TypeError
}construct Trapでは、値でないオブジェクトを返す必要があります。
つまり、nullやnumberやstringは返せません。
しかし、返すオブジェクトは、コンストラクタが同じである必要も、
新しいインスタンスである必要もありません。
newしても同じオブジェクトを返し続けるSingletonの実装も可能です。
const {proxy, revoke} = Proxy.revocable(target, handler);でrevoke(無効化)可能なProxyを作ることができます。
このrevoke()は関数で、呼び出した瞬間にproxyはhandlerとの関係性を
断ち切り、(Trapが作用しないtypeof と===/!==を除いて)
proxyへのアクセスに対してTypeErrorが発するようになります。
Revocableは、Object Capabilityでの代表的なパターンの一つです。 proxyを渡した相手に何か問題があったらrevokeしてそれ以降アクセス拒否できます。
逆のCapabilityとして、実績がたまったら制限がアンロックされていくようなProxy というのもできるでしょう。
-
ECMA262 ECMAScript Language Specification: Trap実装の失敗から
TypeErrorが出るのは、"Essential Internal Method"の"Invariant"や "Abstract Operation"の各操作のチェックに 違反するためです。操作の中で入れ子で操作が使われることもあるので、 直接Proxyに言及してある以外の部分も解釈する必要があります。 -
MDN Proxy handler: Trap単位で上記仕様から導いた不変条件をまとめてあります。 古い仕様も混ざっている点、及び、日本語訳は単語が過剰に訳されている ("非設定" => configurableがfalse、など)点には注意。
-
Object Capability Model: Capabilityは独立した複数の主体のあいだでプログラムと オブジェクトを相互に動かしあうことが前提にあります。 オブジェクトの受け手が静的に(interfaceの制限によって)関係ないものは扱わない ようにするのとは、逆に、 オブジェクトの送り手が動的に必要な分だけアクセスできるようにしたハンドル (facet, forwarder, proxy)を作って渡す、という考え方をするようです
-
You Don't Know JS (book series): ECMAScript自体の言語構造について 理解するための本です。 言語自体を扱う話では、このレベルの知識は前提として必要でしょう。 Proxyについては"ES6 & Beyond"の7章に少しあります。