ProxyとReflectのレシーバーは何ですか？

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して9日目です。クリックしてイベントの詳細をご覧ください。

オブジェクトでProxyは、メソッドの3番目のパラメーターはです。今日のこの記事ではこれは何ですか？Reflectgetsetreceiverreceiver

receiverMDN変換とは受信者を意味します。最初にこのパラメータを解釈する方法を見てみましょう。

プロキシ取得レシーバー

プロキシまたはプロキシを継承するオブジェクト

現在のプロパティがgetterアクセサプロパティの場合、通常、receiverパラメータは現在のプロパティですproxy。では、どのような状況でそれ自体ではreceiverないのでしょうか。proxy

Proxyまず、簡単な栗を見てみましょう。次の栗はgetter、キャッチャーのreceiverパラメーターを使用します。

let obj ={a:1}

let pObj=new Proxy(obj,{
    get(target,key,receiver){
        console.log("receiver",receiver); // receiver  Proxy {a:1}
        console.log("receiver===pObj",receiver===pObj); // true
        return Reflect.get(target,key)
    }
})

console.log(pObj.a); // 1
复制代码

receiverこの栗から、現在のパラメータは現在のプロキシオブジェクトであると結論付けることができます。

Proxyオブジェクトが継承されたときに別の栗を見てみましょう

let obj ={a:1}

var pObj=new Proxy(obj,{
    get(target,key,receiver){
        return receiver
    }
})

console.log(pObj.getReceiver); // pObj {a: 1}

let child = Object.create(pObj);
console.log(child.getReceiver); // child {}
复制代码

オブジェクトchildがオブジェクトから継承されるpObjと、receiverパラメータはそれを継承するオブジェクトを自動的に指します。

この時点で、これProxyのパラメーターが何であるかがわかります。次に、のパラメーターをreceiver見てみましょう。Reflectreceiver

上記の最初の栗を取得して変更しReflect.get、最初のパラメーターをに変更しますreceiver。つまり、getter関数がreceiverトリガーされたときに、対応する属性値を取得します。

let obj ={a:1}

let pObj=new Proxy(obj,{
    get(target,key,receiver){
        return Reflect.get(receiver,key)
    }
})

console.log(pObj.a); 
复制代码

Uncaught RangeError：最大呼び出しスタックサイズを超えました

注意深い学生は、このコードが無限ループであることに気付くでしょう。を渡すと、属性pObj.aがトリガーされ、その後、中央にアクセスし続けます....ネストされているため、無限ループになります。getterreceivergetter

このときReflect.get、3番目Proxyのパラメータは渡されたパラメータreceiverです。上記のコードを修正しましょう。

let obj ={a:1}

let pObj=new Proxy(obj,{
    get(target,key,receiver){
        return Reflect.get(target,key,receiver)
    }
})

console.log(pObj.a); // 1
复制代码

ここでReflect.getのreceiverパラメータは、targetオブジェクトがgetter呼び出されたときの値thisであるため、あまり明確ではない可能性があります。栗を通して見てみましょう。

const obj = { get a() { return this.b; } };
const proxy = new Proxy(obj, {
    get(target, key) {
        return target[key]
    }
})

console.log(Reflect.get(obj, "a")); // undefined
console.log(Reflect.get(obj, "a", { b: 2 })); // 2
复制代码

この栗では、objオブジェクトにgetterプロパティを設定します。aaにアクセスすると、現在のthisにbが返されます。ここで、bが定義されておらず、直接アクセスがであることがわかります。3番目のパラメータundefinedを使用してTheをバインドします。 aの値は最終的にアクセスできます。Reflectreceiverthis{ b: 2 }2

ProxyとReflectのレシーバーは何ですか？

おすすめ