Getters y Setters en JavaScript
Visión general
Los captadores y establecedores en JavaScript se utilizan para definir propiedades computadas o accesores . Una propiedad calculada es aquella que usa una función para obtener o establecer un valor de objeto. La teoría básica es hacer algo como esto:
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'
Esto es útil para hacer cosas automáticamente detrás de escena cuando se accede a una propiedad, como mantener los números dentro del rango, formatear cadenas, desencadenar eventos de cambio de valor, actualizar datos relacionales, proporcionar acceso a propiedades privadas y más.
Los siguientes ejemplos muestran la sintaxis básica, aunque simplemente obtienen y establecen el valor del objeto interno sin hacer nada especial. En casos reales, modificaría el valor de entrada y / o salida para satisfacer sus necesidades, como se indicó anteriormente.
obtener / establecer palabras clave
ECMAScript 5 admite gety setpalabras clave para definir propiedades calculadas. Funcionan con todos los navegadores modernos, excepto IE 8 y versiones inferiores.
var foo = {
bar : 123,
get bar(){ return bar; },
set bar( value ){ this.bar = value; }
};
foo.bar = 456;
var gaz = foo.bar;
Getters y Setters personalizados
gety setno son palabras reservadas, por lo que se pueden sobrecargar para crear sus propias funciones de propiedad computarizadas de navegador cruzado. Esto funcionará en cualquier 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' );
O para un enfoque más compacto, se puede usar una sola función.
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 hacer algo como esto, lo que puede conducir a la acumulación de código.
var foo = {
_a : 123, _b : 456, _c : 789,
getA : function(){ return this._a; },
getB : ..., getC : ..., setA : ..., setB : ..., setC : ...
};
Para los ejemplos anteriores, los nombres de las propiedades internas se resumen con un guión bajo para disuadir a los usuarios de simplemente hacer foo.barvs. foo.get( 'bar' )y obtener un valor "sin cocinar". Puede usar código condicional para hacer cosas diferentes según el nombre de la propiedad a la que se accede (a través del nameparámetro).
Object.defineProperty ()
Usar Object.defineProperty()es otra forma de agregar captadores y establecedores, y se puede usar en objetos después de que se hayan definido. También se puede usar para establecer comportamientos configurables y enumerables. Esta sintaxis también funciona con IE 8, pero desafortunadamente solo en 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__()es otra opción. Está en desuso, pero todavía se usa ampliamente en la web y, por lo tanto, es poco probable que desaparezca pronto. Funciona en todos los navegadores, excepto IE 10 y versiones inferiores. Aunque las otras opciones también funcionan bien en no IE, entonces esta no es tan útil.
var foo = { _bar : 123; }
foo.__defineGetter__( 'bar', function(){ return this._bar; } );
foo.__defineSetter__( 'bar', function( value ){ this._bar = value; } );
También vale la pena señalar que en los últimos ejemplos, los nombres internos deben ser diferentes a los nombres de acceso para evitar la recurrencia (es decir, foo.barllamar foo.get(bar)llamar foo.barllamar llamar foo.get(bar)...).
Ver también
MDN get , set ,
Object.defineProperty () , __defineGetter __ () , __defineSetter __ ()
MSDN
IE8 Getter Support