JavaScript Proxy

2109 ワード

  • ProxyはJavaScript標準内蔵オブジェクト
  • である.
  • ProxyはJavaScriptオブジェクトのミドルウェア
  • です.
  • Proxyオブジェクトは、属性検索、割当、列挙、関数呼び出しなどの基本的な動作を定義するために使用される.
  • ES 6はProxyを導入し、Objectオブジェクトの基本操作をカスタマイズできるようにする.例えば、getObjectの基礎的な動作方法である.
    たとえば:
    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