Proxy JavaScript

Resumo : neste tutorial, você aprenderá sobre o objeto JavaScript Proxy no ES6.

O que é um objeto proxy JavaScript

Um proxy JavaScript é um objeto que envolve outro objeto (destino) e intercepta as operações fundamentais do objeto de destino.

As operações fundamentais podem ser pesquisa de propriedade, atribuição, enumeração, invocações de função, etc.

Criando um objeto proxy

Para criar um novo objeto proxy, use a seguinte sintaxe:

let proxy = new Proxy(target, handler);
Linguagem de código:  JavaScript  ( javascript )

Nesta sintaxe:

• target– é um objeto para embrulhar.
• handler– é um objeto que contém métodos para controlar o comportamento do arquivo target. Os métodos dentro do handlerobjeto são chamados de traps.

Um exemplo simples de proxy

Primeiro, defina um objeto chamado user:

const user = {
    firstName: 'John',
    lastName: 'Doe',
    email: '[email protected]',
}
Linguagem de código:  JavaScript  ( javascript )

Segundo, defina um handlerobjeto:

const handler = {
    get(target, property) {
        console.log(`Property ${property} has been read.`);
        return target[property];
    }
}
Linguagem de código:  JavaScript  ( javascript )

Terceiro, crie um proxyobjeto:

const proxyUser = new Proxy(user, handler);
Linguagem de código:  JavaScript  ( javascript )

O proxyUserobjeto usa o userobjeto para armazenar dados. O proxyUserpode acessar todas as propriedades do userobjeto.

Quarto, acesse as propriedades firstNamee lastNamedo userobjeto por meio do proxyUserobjeto:

console.log(proxyUser.firstName);
console.log(proxyUser.lastName);
Linguagem de código:  CSS  ( css )

Saída:

Property firstName has been read.
John
Property lastName has been read.
Doe

Quando você acessa uma propriedade do userobjeto através do proxyUserobjeto, o get()método no handlerobjeto é chamado.

Quinto, se você modificar o objeto original user, a alteração será refletida em proxyUser:

user.firstName = 'Jane';
console.log(proxyUser.firstName);
Linguagem de código:  JavaScript  ( javascript )

Saída:

Property firstName has been read.
Jane

Da mesma forma, uma alteração no proxyUserobjeto será refletida no objeto original ( user):

proxyUser.lastName = 'William';
console.log(user.lastName);
Linguagem de código:  JavaScript  ( javascript )

Saída:

William    

Armadilhas de proxy

A get()Armadilha

A get()armadilha é disparada quando uma propriedade do targetobjeto é acessada através do objeto proxy.

No exemplo anterior, uma mensagem é impressa quando uma propriedade do userobjeto é acessada pelo proxyUserobjeto.

Geralmente, você pode desenvolver uma lógica customizada no get()trap quando uma propriedade é acessada.

Por exemplo, você pode usar o get()trap para definir propriedades computadas para o objeto de destino. As propriedades computadas são propriedades cujos valores são calculados com base nos valores das propriedades existentes.

O userobjeto não possui uma propriedade fullName, você pode usar o get()trap para criar a fullNamepropriedade com base nas propriedades firstNamee lastName:

const user = {
    firstName: 'John',
    lastName: 'Doe'
}

const handler = {
    get(target, property) {
        return property === 'fullName' ?
            `${target.firstName} ${target.lastName}` :
            target[property];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);
Linguagem de código:  JavaScript  ( javascript )

Saída:

John Doe

A set()Armadilha

A set()armadilha controla o comportamento quando uma propriedade do targetobjeto é definida.

Suponha que o agevalor do usuário deva ser maior que 18. Para impor essa restrição, você desenvolve uma set()armadilha da seguinte forma:

const user = {
    firstName: 'John',
    lastName: 'Doe',
    age: 20
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Age must be a number.');
            }
            if (value < 18) {
                throw new Error('The user must be 18 or older.')
            }
        }
        target[property] = value;
    }
};

const proxyUser = new Proxy(user, handler);
Linguagem de código:  JavaScript  ( javascript )

Primeiro, defina o ageusuário como uma string:

proxyUser.age = 'foo';
Linguagem de código:  JavaScript  ( javascript )

Saída:

Error: Age must be a number.
Linguagem de código:  JavaScript  ( javascript )

Segundo, defina a idade do usuário como 16:

proxyUser.age = '16';    
Linguagem de código:  JavaScript  ( javascript )

Saída:

The user must be 18 or older.

Terceiro, defina a idade do usuário para 21:

proxyUser.age = 21;

Nenhum erro ocorreu.

A apply()Armadilha

O handler.apply()método é uma armadilha para uma chamada de função. Aqui está a sintaxe:

let proxy = new Proxy(target, {
    apply: function(target, thisArg, args) {
        //...
    }
});
Linguagem de código:  JavaScript  ( javascript )

Veja o exemplo a seguir:

const user = {
    firstName: 'John',
    lastName: 'Doe'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}


const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user)); // 
Linguagem de código:  JavaScript  ( javascript )

Saída

JOHN DOE

Mais armadilhas

A seguir estão mais armadilhas:

• construct– intercepta o uso do newoperador
• getPrototypeOf– intercepta uma chamada interna para[[GetPrototypeOf]]
• setPrototypeOf– intercepta uma chamada paraObject.setPrototypeOf
• isExtensible– intercepta uma chamada paraObject.isExtensible
• preventExtensions– intercepta uma chamada paraObject.preventExtensions
• getOwnPropertyDescriptor– intercepta uma chamada paraObject.getOwnPropertyDescriptor

Neste tutorial, você aprendeu sobre o objeto JavaScript Proxy usado para encapsular outro objeto para alterar os comportamentos fundamentais desse objeto.