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); // John
Linguagem de código: JavaScript ( javascript )
A Person
classe possui uma propriedade name
e um construtor. O construtor inicializa a name
propriedade como uma string.
Às vezes, você não quer que a name
propriedade seja acessada diretamente assim:
person.name
Linguagem de código: CSS ( css )
Para fazer isso, você pode criar alguns métodos que manipulam a name
propriedade. 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 Smith
Linguagem de código: JavaScript ( javascript )
Neste exemplo, a Person
classe possui a name
propriedade. Além disso, possui dois métodos adicionais getName()
e setName()
.
O getName()
método retorna o valor da name
propriedade.
O setName()
método atribui um argumento à name
propriedade. Remove setName()
os espaços em branco de ambas as extremidades do newName
argumento e lança uma exceção se newName
estiver vazio.
O constructor()
chama o setName()
método para inicializar a name
propriedade:
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 name
propriedade é alterada para _name
para evitar a colisão do nome com o getter e o setter.
Segundo, o getter usa a get
palavra-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 à name
propriedade da Person
classe, ele verifica se a Person
classe possui alguma name
propriedade.
Caso contrário, o JavaScript verifica se a classe Person possui algum método que se vincule à name
propriedade. Neste exemplo, o name()
método se liga à name
propriedade por meio da get
palavra-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 set
palavra-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 à name
propriedade 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 Doe
Linguagem de código: JavaScript ( javascript )
Neste exemplo, a Person
classe possui o name
getter, mas não o name
setter. 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 latest
para retornar o último participante do meeting
objeto:
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
get
eset
para definir os getters e setters JavaScript para uma classe ou objeto. - A
get
palavra-chave vincula uma propriedade de objeto a um método que será invocado quando essa propriedade for consultada. - A
set
palavra-chave vincula uma propriedade de objeto a um método que será invocado quando essa propriedade for atribuída.