Getters e Setters JavaScript

Resumo : neste tutorial, você aprenderá sobre getters e setters JavaScript e como usá-los de maneira eficaz.

Introdução aos getters e setters JavaScript

O exemplo a seguir define uma classe chamada Person:

class Person {
    constructor(name) {
        this.name = name;
    }
}

let person = new Person("John");
console.log(person.name); // JohnLinguagem de código:  JavaScript  ( javascript )

A Personclasse possui uma propriedade namee um construtor. O construtor inicializa a namepropriedade como uma string.

Às vezes, você não quer que a namepropriedade seja acessada diretamente assim:

person.nameLinguagem de código:  CSS  ( css )

Para fazer isso, você pode criar alguns métodos que manipulam a namepropriedade. Por exemplo:

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person); // Jane Doe

person.setName('Jane Smith');
console.log(person.getName()); // Jane SmithLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, a Personclasse possui a namepropriedade. Além disso, possui dois métodos adicionais getName()e setName().

O getName()método retorna o valor da namepropriedade.

O setName()método atribui um argumento à namepropriedade. Remove setName()os espaços em branco de ambas as extremidades do newNameargumento e lança uma exceção se newNameestiver vazio.

O constructor()chama o setName()método para inicializar a namepropriedade:

constructor(name) {
    this.setName(name);
}Linguagem de código:  JavaScript  ( javascript )

Os métodos getName()e setName()são conhecidos como getter e setter em outras linguagens de programação, como Java e C++.

ES6 fornece uma sintaxe específica para definir o getter e o setter usando as palavras-chave get e set. Por exemplo:

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Primeiro, a namepropriedade é alterada para _namepara evitar a colisão do nome com o getter e o setter.

Segundo, o getter usa a getpalavra-chave seguida pelo nome do método:

get name() {
    return this._name;
}Linguagem de código:  JavaScript  ( javascript )

Para chamar o getter, você usa a seguinte sintaxe:

let name = person.name;Linguagem de código:  JavaScript  ( javascript )

Quando o JavaScript vê o acesso à namepropriedade da Personclasse, ele verifica se a Personclasse possui alguma namepropriedade.

Caso contrário, o JavaScript verifica se a classe Person possui algum método que se vincule à namepropriedade. Neste exemplo, o name()método se liga à namepropriedade por meio da getpalavra-chave. Depois que o JavaScript encontra o método getter, ele executa o método getter e retorna um valor.

Terceiro, o setter usa a setpalavra-chave seguida do nome do método:

set name(newName) {
    newName = newName.trim();
    if (newName === '') {
        throw 'The name cannot be empty';
    }
    this._name = newName;
}Linguagem de código:  JavaScript  ( javascript )

O JavaScript chamará o name()setter quando você atribuir um valor à namepropriedade como este:

person.name = 'Jane Smith';Linguagem de código:  JavaScript  ( javascript )

Se uma classe tiver apenas um getter, mas não um setter, e você tentar usar o setter, a alteração não terá efeito. Veja o exemplo a seguir:

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
}

let person = new Person("Jane Doe");
console.log(person.name);

// attempt to change the name, but cannot
person.name = 'Jane Smith';
console.log(person.name); // Jane DoeLinguagem de código:  JavaScript  ( javascript )

Neste exemplo, a Personclasse possui o namegetter, mas não o namesetter. Ele tenta chamar o setter. No entanto, a alteração não entra em vigor porque a classe Person não possui o configurador de nomes.

Usando getter em um objeto literal

O exemplo a seguir define um getter chamado latestpara retornar o último participante do meetingobjeto:

let meeting = {
    attendees: [],
    add(attendee) {
        console.log(`${attendee} joined the meeting.`);
        this.attendees.push(attendee);
        return this;
    },
    get latest() {
        let count = this.attendees.length;
        return count == 0 ? undefined : this.attendees[count - 1];
    }
};

meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is ${meeting.latest}.`);Linguagem de código:  JavaScript  ( javascript )

Saída:

John joined a meeting.
Jane joined a meeting.
Peter joined a meeting.
The latest attendee is Peter.

Resumo

• Use as palavras-chave gete setpara definir os getters e setters JavaScript para uma classe ou objeto.
• A getpalavra-chave vincula uma propriedade de objeto a um método que será invocado quando essa propriedade for consultada.
• A setpalavra-chave vincula uma propriedade de objeto a um método que será invocado quando essa propriedade for atribuída.