Acessadores de Objetos JavaScript

Acessores JavaScript (Getter e Setter)

O ECMAScript 5 (2009) introduziu Getter e Setter.

Getter e Setter permitem que você defina acessores de objeto (propriedades calculadas).

Getter JavaScript (palavra-chave get)

Este exemplo usa lang Propriedade para obter language O valor da propriedade.

Instância

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language;
  }
};
// Usar getter para exibir dados do objeto:
document.getElementById("demo").innerHTML = person.lang;

Experimente você mesmo

Setter JavaScript (palavra-chave set)

Este exemplo usa lang Propriedade para definir language O valor da propriedade.

Instância

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang;
  }
};
// Usar setter para definir propriedade do objeto:
person.lang = "en";
// Exibir dados do objeto:
document.getElementById("demo").innerHTML = person.language;

Experimente você mesmo

Função JavaScript ou Getter?

Onde está a diferença entre os dois exemplos abaixo?

Exemplo 1

var person = {
  firstName: "Bill",
  lastName : "Gates",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
// Use métodos para exibir dados de objetos:
document.getElementById("demo").innerHTML = person.fullName();

Experimente você mesmo

Exemplo 2

var person = {
  firstName: "Bill",
  lastName : "Gates",
  get fullName() {
    return this.firstName + " " + this.lastName;
  }
};
// Usar getter para exibir dados do objeto:
document.getElementById("demo").innerHTML = person.fullName;

Experimente você mesmo

O exemplo 1 acessa fullName como função: person.fullName().

O exemplo 2 acessa fullName como propriedade: person.fullName.

O segundo exemplo fornece uma sintaxe mais concisa.

Qualidade de dados

Ao usar getter e setter, o JavaScript pode garantir uma melhor qualidade de dados.

Neste exemplo, usamos lang As propriedades são retornadas em maiúsculo. language O valor da propriedade:

Instância

// Criar objeto:
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "en",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Usar getter para exibir dados do objeto:
document.getElementById("demo").innerHTML = person.lang;

Experimente você mesmo

Neste exemplo, usamos lang o atributo armazena valores em maiúsculo no language no atributo:

Instância

var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};
// Usar setter para definir propriedade do objeto:
person.lang = "en";
// Exibir dados do objeto:
document.getElementById("demo").innerHTML = person.language;

Experimente você mesmo

Por que usar Getter e Setter?

  • ele fornece uma sintaxe mais concisa
  • ele permite que a sintaxe dos atributos e métodos seja a mesma
  • ele garante uma melhor qualidade de dados
  • útil para trabalho em segundo plano

uma instância de contador

Instância

var obj = {
  counter : 0,
  get reset() {
    this.counter = 0;
  },
  get increment() {
    this.counter++;
  },
  get decrement() {
    this.counter--;
  },
  set add(value) {
    this.counter += value;
  },
  set subtract(value) {
    this.counter -= value;
  }
};
// Operação do Contador:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()

Experimente você mesmo

Object.defineProperty() O método também pode ser usado para adicionar Getter e Setter:

Instância

// Definir objeto
var obj = {counter : 0};
// Definir setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (value) {this.counter -= value;}
});
// Operação do Contador:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;

Experimente você mesmo

Suporte ao Navegador

Internet Explorer 8 ou versões anteriores não suportam Getter e Setter:

Sim 9.0 Sim Sim Sim