¿Qué es el receptor en Proxy y Reflect?

¡Acostúmbrate a escribir juntos! Este es el noveno día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

En Proxyy Reflectobjeto, getel settercer parámetro del método es receiver, ¿qué es esto en este artículo de hoy receiver?

receiverLa traducción significa el receptor.Veamos MDNprimero cómo interpretar este parámetro.

proxy obtener receptor

Proxy o un objeto que hereda Proxy

Cuando la propiedad actual es una getterpropiedad de acceso, normalmente el receiverparámetro es el proxypropio actual. Entonces, ¿bajo qué circunstancias no es ella receivermisma proxy?

Primero veamos una Proxycastaña simple, la siguiente castaña usamos los parámetros getteren el 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
复制代码

A partir de este castaño, se puede concluir que el receiverparámetro actual es el objeto proxy actual.

Miremos otra Proxycastaña cuando se hereda el objeto .

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

Cuando un childobjeto se hereda de otro pObjobjeto, el receiverparámetro apuntará automáticamente al objeto que lo hereda.

En este punto, tenemos cuáles son Proxylos receiverparámetros en this, y luego veamos Reflectlos receiverparámetros en .

Tomemos la primera castaña de arriba y modifíquela, y cambiemos Reflect.getel primer parámetro a receiver, es decir, cuando getterse active la función receiver, obtenga el valor de atributo correspondiente de ella.

let obj ={a:1}

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

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

RangeError no capturado: se excedió el tamaño máximo de la pila de llamadas

Los estudiantes cuidadosos encontrarán que este fragmento de código es un bucle infinito. Al pasar , el atributo pObj.ase activa y luego continúa accediendo al medio ... Se ha anidado, lo que da como resultado un bucle infinito.getterreceivergetter

En este momento Reflect.get, el tercer parámetro Proxyes el parámetro pasado receiver, corrijamos el código anterior.

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.getEl receiverparámetro aquí es el valor cuando se llama al targetobjeto , por lo que puede no ser muy claro, echemos un vistazo a través de una castaña.getterthis

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

En este castaño, establecemos una getterpropiedad en el objeto obj. aCuando accedemos a, devolvemos b en el this actual. Aquí podemos ver que b no está definido, y el acceso directo es undefined, usamos Reflectel tercer parámetro para receivervincular The eventualmente se puede acceder al thisvalor de a .{ b: 2 }2

¿Qué es el receptor en Proxy y Reflect?

Supongo que te gusta