Objetos superpoderosos usando Proxy no JavaScript

9d atrás

Ion

---

0 0

O objeto Proxy do #JavaScript é usado para definir comportamentos customizados em operações como retorno, atribuição, enumeração etc. Ele pode ser usado em objetos convencionais, arrays, funções e até em outro Proxy.

Exemplo básico

O exemplo a seguir, é um Proxy mínimo, que tem o mesmo comportamento padrão. Retorna as propriedades e atribui elas sem nenhuma alteração.

const p = new Proxy({}, {
	get(obj, prop) {
		return obj[prop];
	},
	set(obj, prop, value) {
		obj[prop] = value;
	}
});

Exemplo customizado

Agora vamos criar um objeto com Proxy, mas que tem alguns superpoderes.

const person = new Proxy({}, {
	get(obj, prop) {
		if (prop === 'age') {
			const today = new Date();

			return today.getFullYear() - obj.yearOfBirth;
		} else return obj[prop];
	},
	set(obj, prop, value) {
		if (prop === 'yearOfBirth' && value <= 0) throw new Error('A idade deve ser maior que 0');
		
		obj[prop] = value;
    }
});

As propriedades do objeto são atribuídas da mesma maneira que um objeto normal.

person.name = 'João da Silva';
person.yearOfBirth = 2015;

get

A função get permite alterar o comportamento padrão de retorno. Observe acima que quando você quer retornar a propriedade "age" ela é calculada com base no ano de nascimento, as demais propriedades são retornadas normalmente.

person.age; // 10

set

Com a função set podemos modificar o comportamento de atribuição. No exemplo acima, "yearOfBirth" tem que ser maior que 1, se não lançará um erro.

person.yearOfBirth = 2015; // Ok

person.yearOfBirth = 0; // Error: A idade deve ser maior que 0

Com Proxy as possibilidades são infinitas, você pode criar os controles e personalizações que você quiser para um objeto.