Quick actions

cmd+k|ctrl+k

Navigation

Languages

Proxies

Snippet info

Language

JavaScript

Visibility

public

Author

nvmarcosalex

Created

2018-08-22T20:35:23Z

Updated

2018-08-22T20:46:00Z

// new Proxy() receives two parameters
// 1 - objeto da qual será o proxy
// 2- objeto contendo a lista de metódos que serão utilizados para tratar o acesso aos dados do primeiro objeto. (HANDLER)

const richard = {status: 'looking for work'};
const handler = {
    get(target, propName) {
        console.log(target); // the `richard` object, not `handler` and not `agent`
        console.log(propName); // the name of the property the proxy (`agent` in this case) is checking
        return 'You are intercepted'
        // return target[propName];
    }
};
const agent = new Proxy(richard, handler);
console.log(agent.status); // logs out the richard object (not the agent object!) and the name of the property being accessed (`status`)




const richard2 = {status: 'looking for work'};
const handler2 = {
    set(target, propName, value) {
        if (propName === 'payRate') { // if the pay is being set, take 15% as commission
            value = value * 0.85;
        }
        target[propName] = value;
    }
};
const agent2 = new Proxy(richard2, handler2);
agent.payRate = 1000; // set the actor's pay to $1,000
agent.payRate; // $850 the actor's actual pay


//Outras armadilhas
//Até aqui, nós vimos as armadilhas get e set (que provavelmente são as mais utilizadas), mas existem um total de 13 armadilhas diferentes que podem ser utilizadas no handler de um proxy!
//get - permite que o proxy controle chamadas para acesso à propriedades
//set - permite que o proxy controle alterações de valor da propriedade
//apply - permite que o proxy controle quando o objeto-alvo é invocado (o objeto-alvo é uma função)
//has - permite que o proxy controle o uso do operador in
//deleteProperty - permite que o proxy controle quando uma propriedade é deletada
//ownKeys - permite que o proxy controle quando todas as chaves são requisitadas
//construct - permite que o proxy controle quando o proxy é utilizado com a palavra-chave new, como um construtor
//defineProperty - permite que o proxy controle quando defineProperty é utilizado para criar uma nova propriedade no objeto
//getOwnPropertyDescriptor - permite que o proxy controle a recuperação da descrição da propriedade
//preventExtenions - permite que o proxy controle chamadas ao Object.preventExtensions() no objeto proxy
//isExtensible - permite que o proxy controle chamadas ao Object.isExtensible no objeto proxy
//getPrototypeOf - permite que o proxy controle chamadas ao Object.getPrototypeOf no objeto proxy
//setPrototypeOf - permite que o proxy controle chamadas ao Object.setPrototypeOf no objeto proxy


console.log('====== ES5 proxyes =========');

var obj = {
    _age: 5,
    _height: 4,
    get age() {
        console.log(`getting the "age" property`);
        console.log(this._age);
        return this._age;
    },
    get height() {
        console.log(`getting the "height" property`);
        console.log(this._height);
        return this._height;
    }
};

obj.age; // logs 'getting the "age" property' & 5
obj.height; // logs 'getting the "height" property' & 4

obj.weight = 120; // set a new property on the object
obj.weight; // logs just 120

console.log('====== ES6 proxyes =========');
const proxyObj = new Proxy({age: 5, height: 4}, {
    get(targetObj, property) {
        console.log(`getting the ${property} property`);
        console.log(targetObj[property]);
    }
});

proxyObj.age; // logs 'getting the age property' & 5
proxyObj.height; // logs 'getting the height property' & 4

proxyObj.weight = 120; // set a new property on the object
proxyObj.weight; // logs 'getting the weight property' & 120
INFO