JavaScript Proxy
2109 ワード
Object
オブジェクトの基本操作をカスタマイズできるようにする.例えば、get
はObject
の基礎的な動作方法である.たとえば:
const obj = {val:10);
// obj.val obj get val
console.log(obj.val);
// set obj
obj.val = 20;
Proxyを作成let proxy = new Proxy(target, handler);
Proxy構成関数を呼び出し、new Proxy()
はオブジェクトに戻り、target
初期化オブジェクトの値だけでなく、get
およびset
のような基本的な動作は、handler
オブジェクトによってカスタマイズロジックを指定することができる.パラメータ
秒数
タージ
Proxyパッケージを使用したターゲットは、任意のタイプのオブジェクトとすることができます.
ハンドル
実行対象の属性は、1つの操作を行うときにプロキシを定義する行為です.
たとえば:
const proxy = new Proxy(
{id:1, name:"alice"},
{
get:function(){
console.log("a value has been accessed");
}
}
);
console.log(proxy.name);
// a value has been accessed
// undefined
get
演算子のデフォルトの実装は、ステートメントのみを記録するために書き換えられたObject
に格納された値を返すので、この値は永遠に戻ってこないので、出力undefined
.const proxy = new Proxy(
{id:1, name:"alice"},
{
get:function(obj, prop){
console.log("a value has been accessed");
return obj[prop];
}
}
);
console.log(proxy.name);//alice
get
のために提供されるカスタムカバーはブロックと呼ばれ、handler
のオブジェクトは基本的にブロックのセットを含むオブジェクトであり、オブジェクト属性にアクセスするたびにトリガされる.set
に傍受を追加し、設定値に変更された属性を記録し、このキーに設定された値を記録する.const proxy = new Proxy(
{id:1, name:"alice"},
{
get:function(obj, prop){
console.log("a value has been accessed");
return obj[prop];
},
set:function(obj, prop, value){
console.log(`${prop} is being set to ${value}`);
obj[prop] = value;
}
}
);
proxy.id = 10;
console.log(proxy.id);
// id is being set to 10
// a value has been accessed
// 10