Accesores de objetos de JavaScript
Accesores de JavaScript (getters y setters)
ECMAScript 5 (ES5 2009) introdujo Getter y Setters.
Getters y setters le permiten definir objetos de acceso (propiedades calculadas).
Captador de JavaScript (la palabra clave get)
Este ejemplo utiliza una lang
propiedad para get
el valor de la language
propiedad.
Ejemplo
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
Setter de JavaScript (la palabra clave establecida)
Este ejemplo utiliza una lang
propiedad para set
el valor de la language
propiedad.
Ejemplo
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang;
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
¿Función de JavaScript o captador?
¿Cuál es la diferencia entre estos dos ejemplos?
Ejemplo 1
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a method:
document.getElementById("demo").innerHTML = person.fullName();
Ejemplo 2
const person = {
firstName: "John",
lastName: "Doe",
get fullName() {
return this.firstName + " " +
this.lastName;
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.fullName;
Ejemplo 1 acceder a fullName como una función: person.fullName().
Ejemplo 2 accede a fullName como una propiedad: person.fullName.
El segundo ejemplo proporciona una sintaxis más simple.
Calidad de datos
JavaScript puede asegurar una mejor calidad de los datos cuando se usan captadores y definidores.
Usando la lang
propiedad, en este ejemplo, devuelve el valor de la language
propiedad en mayúsculas:
Ejemplo
// Create an object:
const person = {
firstName: "John",
lastName: "Doe",
language: "en",
get lang() {
return this.language.toUpperCase();
}
};
// Display data from the object using a getter:
document.getElementById("demo").innerHTML = person.lang;
El uso de la lang
propiedad, en este ejemplo, almacena un valor en mayúsculas en la language
propiedad:
Ejemplo
const person = {
firstName: "John",
lastName: "Doe",
language: "",
set lang(lang) {
this.language = lang.toUpperCase();
}
};
// Set an object
property using a setter:
person.lang = "en";
// Display data from the object:
document.getElementById("demo").innerHTML = person.language;
¿Por qué usar Getters y Setters?
- Da una sintaxis más simple.
- Permite la misma sintaxis para propiedades y métodos.
- Puede asegurar una mejor calidad de datos
- Es útil para hacer cosas entre bastidores.
Objeto.defineProperty()
El Object.defineProperty()
método también se puede usar para agregar Getters y Setters:
Un contraejemplo
// Define object
const obj = {counter : 0};
// Define 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;}
});
// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;