Что такое получатель в Proxy и Reflect?

Привыкайте писать вместе! Это 9-й день моего участия в «Новом ежедневном плане Nuggets · Апрельское задание по обновлению», нажмите, чтобы просмотреть подробности мероприятия .

В Proxyи Reflectобъект, getтретий setпараметр метода receiver, что это сегодня в этой статье receiver?

receiverПеревод означает приемник.Давайте MDNсначала посмотрим, как интерпретировать этот параметр.

прокси получить приемник

Прокси или объект, который наследует прокси

Когда текущее свойство является 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, а затем давайте посмотрим Reflectна receiverпараметры в .

Возьмем первый каштан выше и модифицируем его, а 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третий параметр 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объекта , так что может быть не очень понятно, давайте посмотрим на него сквозь каштан.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
复制代码

В этом каштане мы устанавливаем getterсвойство объекта obj.Когда aмы обращаемся к a, мы возвращаем b в текущем this.Здесь мы видим, что b не определен, а прямой доступ undefined, мы используем Reflectтретий параметр для receiverпривязки thisзначение { b: 2 }a может быть доступно в конечном итоге 2.

Что такое получатель в Proxy и Reflect?

рекомендация