7
respostas

Eu não entendi a sintaxe do handler

Como o get chama um get dentro dele isso é normal?

get: function(target, prop, receiver) {

     console.log(`a propriedade "${prop}" foi interceptada`);
     return Reflect.get(target, prop, receiver);
}

E minha segunda pergunta é : onde esta mostrando que o get altera o objeto original?

7 respostas

Fala ai Felipe, tudo bem? Vamos lá:

Como o get chama um get dentro dele isso é normal?

Na verdade são dois get's diferents, um seria do seu Proxy e o segundo seria do objecto que está sendo feito o Proxy.

Ou seja, o primeiro get é dó novo objeto. o segundo que é chamado com Reflect.get é o get do objeto original.

E minha segunda pergunta é : onde esta mostrando que o get altera o objeto original?

Na verdade o get não faz alteração no objeto, ele apenas vai ler os dados.

As alterações são feitas no set.

Espero ter ajudado.

Ainda esta confuso pra mim. Essa trap quando acionada , apresenta 2 console.logs. O do proxy e do objeto original correto? Onde esta o console log do Reflect.get ? Porque no codigo eu só vejo apenas o console.log do proxy

Fala Felipe, vamos lá:

O do proxy e do objeto original correto?

Caso o get do objeto original também tenha console.log, correto.

Onde esta o console log do Reflect.get ?

Vamos pensar o seguinte, imagine a seguinte classe:

class Person {
    constructor(name, age) {
        this._name = name
        this._age = age
    }

    get name() {
        console.log('Lendo o nome')
        return this._name
    }

    get age() {
        console.log('Lendo a idade')
        return this._age
    }
}

Caso a gente crie uma nova instância dela:

const p1 = new Person('Matheus', 25)

Podemos ler os dados do nome e idade através dos getters:

console.log(p1.name)
console.log(p1.age)

Nesse caso, o p1.name vai chamar o get name e o p1.age vai chamar o get age.

Agora, caso criamos um Proxy um para o objeto p1:

const personProxy = new Proxy(p1, {
    get(target, prop, receiver) {
        console.log(`Lendo a propriedade ${prop}`)
        return Reflect.get(target, prop, receiver)
    },
})

Ai poderíamos ler o nome e idade do Proxy:

console.log(personProxy.name)
console.log(personProxy.age)

Nesse caso ele vai chamar o get do Proxy, no caso esse código:

get(target, prop, receiver) {
    console.log(`Lendo a propriedade ${prop}`)
    return Reflect.get(target, prop, receiver)
},

Nesse caso ele vai chamar o primeiro log do Proxy e depois com o Reflect.get vai chamar o get do nome e idade, mas, do objeto original, no caso o get name e get age.

E por último vai chamar o get para ler os dados da classe, no caso: this._name e this._age.

Então seria dois get's, o primeiro para o get que criamos e o segundo para ler os dados da classe (que possuem um get por baixo dos panos por padrão).

Por isso ele vai logar duas vezes.

Espero ter ajudado.

Exato isso faz sentido pra mim. Porém não é isso que está acontecendo. Eu não inseri console.log no objeto original e mesmo assim me parece que o get do proxy esta sendo chamado duas vezes.

class Funcionario {

    constructor(email) {
        this._email = email;
    }

    get email() {
    //sem console.log
        return this._email;
    }

    set email(email) {
    //sem console.log
        this._email = email;
    }
}

let funcionario = new Proxy(new Funcionario('abc@abc.com'), {

    get(target, prop, receiver) {
        console.log('Armadilha aqui!');
        //esse console.log esta sendo executado 2x porque?
    console.log(prop);
        return Reflect.get(target, prop, receiver);
    }

});

console.log(funcionario.email);

Fala Felipe, falha minha aqui, editei a resposta anterior, se quiser dá uma olhada lá.

Porque ele é chamado duas vezes? Isso porque será feito dos get's para nosso objeto, um vai ler o nosso get criado, no caso o:

get email() {
        //sem console.log
        return this._email;
}

E veja que dentro desse get temos que ler os dados do this._email, ou seja, outro get será chamado para ler as informações do _email.

Por isso que o código:

//esse console.log esta sendo executado 2x porque?
console.log(prop);

É chamado duas vezes, um para o get e outro para o _email.

Isso porque os atributos da classe por baixo dos panos possuem um get padrão.

Espero ter ajudado e desculpe o mal entendido.

Quase lá :) Então get(target, prop, receiver) é chamado no método e na propriedade correto?

Mas e o Reflect.get() ? Ele não deveria ser executado 2x ja que está dentro do escopo de get(target, prop, receiver)?

Fala Felipe, bora lá:

Então get(target, prop, receiver) é chamado no método e na propriedade correto?

Na verdade ele é chamado nos dois get's, quando ele é chamado na propriedade é porque internamento por baixo dos panos as propriedades possuem um get e set por padrão.

Mas e o Reflect.get() ? Ele não deveria ser executado 2x ja que está dentro do escopo de get(target, prop, receiver)?

Ele é chamado duas vezes porque dois get's são chamados, o sem _ e com _.

Se você adicionar o console.log(prop) vai ver as duas chamadas para duas propriedades (getters) diferente.

Espero ter ajudado.