Easy JavaScript Parte 8: O que são getters e setters?

Primeiro, um setter é usado para definir o valor de uma propriedade. Um setter é chamado sempre que o valor da propriedade é alterado. Em outras palavras, ele executa uma função para cada vez que uma propriedade usada dentro da função setter é alterada. Dê uma olhada no seguinte código:

var foo = {
    set cal(x) {
        this.a = x + 5
    },
    a: undefined
}
 
foo.cal = 8;
console.log(foo.a);

No objeto foo, o setter cal será chamado cada vez que a propriedade a for alterada. Como saída, você receberá 13 impressos. Ao criar um setter, você precisa seguir estas regras:

1. Um nome de setter pode ser cadeia de caracteres ou número.
2. Um setter deve ter exatamente um parâmetro de entrada.
3. Deve haver apenas um setter com o mesmo identificador em um objeto
4. Você pode remover um setter usando o operador delete

Para outros exemplos de um setter, vamos dar uma olhada no seguinte código:

var greet = {
    set welcome(m) {
        this.msg = this.msg + m;
    },
    msg: "Hello "
}
greet.welcome = "Jaosn";
console.log(greet.msg);

Para o trecho de código acima como saída, Hello Jason será impresso. Você também pode adicionar o setter a um objeto existente usando Object.defineProperty. Digamos que você tenha um objeto foo:

var foo = {
    num: 0
}

Agora, para adicionar um setter para o objeto foo existente, use Object.defineProperty.

Object.defineProperty(foo, 'cal', {
    set: function (x) {
        this.num = this.num + x;
    }
});
foo.cal = 9;
console.log(foo.num); //9

Acima, você está adicionando um setter a um objeto existente e obterá 9 como saída.

JavaScript Getter

Usando um getter JavaScript, você pode chamar uma função sempre que fizer uma leitura de propriedade. Portanto, se você quiser chamar uma função, o JavaScript usará um getter sempre que um objeto for pesquisado. Considere o seguinte código:

var cal = {
    num: 0,
    get add() {
        return this.num + 5;
    }
}
console.log(cal.add);

No código acima, sua saída será o valor calculado da propriedade num. Principalmente, você usará getters para ler o valor de uma propriedade que retorna um valor calculado dinamicamente. Se você precisar ler o valor de uma propriedade nos seguintes critérios:

1. A propriedade retornará o valor calculado dinâmico
2. O valor interno da propriedade não deve ser refletido sem chamar um método explicitamente

Para atingir esses dois requisitos, você deve usar um getter. Considere o código abaixo:

var foo = {
    name: 'jason',
    get Name() {
        return this.name + " beres";
    }
}
console.log(foo.Name);

No código acima, você está usando um getter para calcular o valor da propriedade name. Aqui você obterá a saída Jason Beres.

Ao criar um getter, você precisa se lembrar das seguintes regras:

1. Um nome getter pode ser uma string ou um número.
2. Um getter não deve ter nenhum parâmetro de entrada – ele deve ter exatamente zero parâmetros.
3. Deve haver apenas um getter com o mesmo identificador em um objeto
4. Você pode remover um getter usando o operador delete

 

Você também pode adicionar um getter a um objeto existente usando o Object.defineProperty.  Digamos que você tenha um objeto foo:

var foo = {
    num: 1
}

Para adicionar um getter para o objeto foo existente, use o Object.defineProperty.

Object.defineProperty(foo, 'numgetter',
    {
        get: function () {
            return this.num + 1;
        }
    });
console.log(foo.numgetter); //2

Como você pode ver acima, você está adicionando um getter a um objeto existente e sua saída será 2.

Conclusão

Ter um bom entendimento de getters e setters é necessário para trabalhar com objetos em JavaScript. Usando um setter, você pode chamar uma função sempre que o valor de uma propriedade é alterado e, usando um getter, você pode retornar o valor calculado de uma propriedade. E é isso!

Não se esqueça de verificar Ignite UI para JavaScript/HTML5 e ASP.NET MVC, que você pode usar com HTML5, Angular, React e ASP.NET MVC para criar aplicativos avançados da Internet. Você pode baixar uma versão de avaliação de todos os nossos controles JavaScript gratuitamente!