Quel est le récepteur dans Proxy et Reflect ?

Prenez l'habitude d'écrire ensemble ! C'est le 9ème jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

Dans Proxyet Reflectobjet, getle settroisième paramètre de la méthode est receiver, qu'est-ce que c'est dans cet article aujourd'hui receiver?

receiverLa traduction signifie le récepteur. Voyons d' MDNabord comment interpréter ce paramètre.

proxy obtenir le récepteur

Proxy ou un objet qui hérite de Proxy

Lorsque la propriété courante est une getterpropriété accesseur, le receiverparamètre est généralement le courant proxylui-même. Alors dans quelles circonstances n'est-il receiverpas proxylui-même ?

Regardons d'abord un Proxychâtaignier simple, le châtaignier suivant nous utilisons les paramètres getterdans le receveur .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
复制代码

De ce châtaignier, on peut conclure que le receiverparamètre courant est l'objet proxy courant.

Regardons un autre Proxychâtaignier lorsque l'objet est hérité

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

Lorsqu'un childobjet est hérité d' un pObjobjet, le receiverparamètre pointera automatiquement vers l'objet qui en hérite.

À ce stade, nous avons quels sont Proxyles receiverparamètres de this, puis regardons Reflectles receiverparamètres de .

Prenons la première châtaigne ci-dessus et modifions-la, et changeons Reflect.getle premier paramètre en receiver, c'est-à-dire que lorsque la getterfonction est déclenchée receiver, récupérons la valeur d'attribut correspondante.

let obj ={a:1}

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

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

Erreur de plage non détectée : la taille maximale de la pile d'appels a été dépassée

Les étudiants attentifs découvriront que ce morceau de code est une boucle infinie. Lors du passage de , l' attribut pObj.aest déclenché , puis il continue d'accéder au milieu .... Il a été imbriqué, ce qui donne une boucle infinie.getterreceivergetter

À ce stade Reflect.get, le troisième paramètre Proxyest le paramètre passé dans receiver, corrigeons le code ci-dessus.

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.getLe receiverparamètre ici est la valeur lorsque l' targetobjet est getterappelé this, donc ce n'est peut-être pas très clair, regardons-le à travers un châtaignier.

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

Dans cette châtaigne, nous définissons une getterpropriété sur l'objet obj. aLorsque nous accédons à a, nous renvoyons b dans le courant this. Ici, nous pouvons voir que b n'est pas défini, et l'accès direct est undefined, nous utilisons Reflectle troisième paramètre pour receiverlier The thisla valeur { b: 2 }de a peut être consultée éventuellement 2.