What is the receiver in Proxy and Reflect?

Get into the habit of writing together! This is the 9th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

In Proxyand Reflectobject, getthe setthird parameter of the method is receiver, what is this in this article today receiver?

receiverThe translation means the receiver. Let's see MDNhow to interpret this parameter first.

proxy get receiver

Proxy or an object that inherits Proxy

When the current property is an getteraccessor property, usually the receiverparameter is the current proxyitself. So under what circumstances is it receivernot proxyitself?

Let's first look at a simple Proxychestnut, the following chestnut we use the parameters getterin the catcher .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
复制代码

From this chestnut, it can be concluded that the current receiverparameter is the current proxy object.

Let's look at another Proxychestnut when the object is inherited

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 {}
复制代码

When an childobject is inherited from an pObjobject, the receiverparameter will automatically point to the object that inherits it.

At this point, we have what Proxythe receiverparameters in this are, and then let's look Reflectat the receiverparameters in .

Let's take the first chestnut above and modify it, and change Reflect.getthe first parameter to receiver, that is, when the getterfunction is triggered receiver, get the corresponding attribute value from it.

let obj ={a:1}

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

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

Uncaught RangeError: Maximum call stack size exceeded

Careful students will find that this piece of code is an infinite loop. When passing , the attribute pObj.ais triggered , and then it continues to access the middle .... It has been nested, resulting in an infinite loop.getterreceivergetter

At this time Reflect.get, the third parameter Proxyis the parameter passed in receiver, let's correct the above code.

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.getThe receiverparameter in here is the value when the targetobject is gettercalled this, so it may not be very clear, let's take a look at it through a chestnut.

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
复制代码

In this chestnut, we set a getterproperty on the obj object a, and when we access a, we return b in the current this. Here we can see that b is not defined, and the direct access is undefined, we use Reflectthe third parameter to receiverbind The thisvalue { b: 2 }of a can be accessed eventually 2.

What is the receiver in Proxy and Reflect?

Guess you like