Getters e Setters em JavaScript
Visão geral
Getters e setters em JavaScript são usados para definir propriedades computadas ou acessadores . Uma propriedade computada é aquela que usa uma função para obter ou definir um valor de objeto. A teoria básica está fazendo algo assim:
var user = { /* ... object with getters and setters ... */ };
user.phone = '+1 (123) 456-7890'; // updates a database
console.log( user.areaCode ); // displays '123'
console.log( user.area ); // displays 'Anytown, USA'
Isso é útil para fazer coisas automaticamente nos bastidores quando uma propriedade é acessada, como manter números no intervalo, reformatar cadeias de caracteres, acionar eventos com valor alterado, atualizar dados relacionais, fornecer acesso a propriedades particulares e muito mais.
Os exemplos abaixo mostram a sintaxe básica, embora eles simplesmente obtenham e definam o valor interno do objeto sem fazer nada de especial. Nos casos do mundo real, você modificaria o valor de entrada e / ou saída para atender às suas necessidades, conforme observado acima.
obter / definir palavras-chave
O ECMAScript 5 suporta gete setpalavras - chave para definir propriedades calculadas. Eles funcionam com todos os navegadores modernos, exceto o IE 8 e abaixo.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Getters e setters personalizados
gete setnão são palavras reservadas, para que possam ser sobrecarregadas para criar suas próprias funções de propriedade computadas em vários navegadores. Isso funcionará em qualquer navegador.
var foo = {
_bar : 123,
get : function( name ){ return this[ '_' + name ]; },
set : function( name, value ){ this[ '_' + name ] = value; }
};
foo.set( 'bar', 456 );
var gaz = foo.get( 'bar' );
Ou, para uma abordagem mais compacta, uma única função pode ser usada.
var foo = {
_bar : 123,
value : function( name /*, value */ ){
if( arguments.length < 2 ){ return this[ '_' + name ]; }
this[ '_' + name ] = value;
}
};
foo.value( 'bar', 456 );
var gaz = foo.value( 'bar' );
Evite fazer algo assim, o que pode levar ao inchaço do código.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this._a; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
Para os exemplos acima, os nomes das propriedades internas são abstraídos com um sublinhado para desencorajar os usuários de simplesmente fazer foo.barvs. foo.get( 'bar' )e obter um valor "não cozido". Você pode usar código condicional para fazer coisas diferentes, dependendo do nome da propriedade que está sendo acessada (por meio do nameparâmetro).
Object.defineProperty ()
Usar Object.defineProperty()é outra maneira de adicionar getters e setters, e pode ser usado em objetos depois de definidos. Também pode ser usado para definir comportamentos configuráveis e enumeráveis. Essa sintaxe também funciona com o IE 8, mas infelizmente apenas em objetos DOM.
var foo = { _bar : 123 };
Object.defineProperty( foo, 'bar', {
get : function(){ return this._bar; },
set : function( value ){ this._bar = value; }
} );
foo.bar = 456;
var gaz = foo.bar;
__defineGetter __ ()
Finalmente, __defineGetter__()é outra opção. Ele foi descontinuado, mas ainda é amplamente usado na Web e, portanto, é improvável que desapareça tão cedo. Ele funciona em todos os navegadores, exceto no IE 10 e abaixo. Embora as outras opções também funcionem bem em não-IE, essa não é tão útil.
var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );
Também digno de nota é que, nos últimos exemplos, os nomes internos devem ser diferentes dos nomes dos acessadores para evitar recursão (ou seja, foo.barchamando foo.get(bar)chamando foo.barchamando foo.get(bar)...).
Veja também
MDN get , set ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ () Suporte ao
MSDN
IE8 Getter