La mejor guía para Getters y Setters en JavaScript

Getters y setters son funciones o métodos utilizados para obtener y establecer los valores de las variables . El concepto getter-setter es común en la programación de computadoras : casi todos los lenguajes de programación de alto nivel vienen con un conjunto de sintaxis para implementar getters y setters, incluido JavaScipt.

En esta publicación, veremos qué son los setters de getters, y cómo crearlos y usarlos en JavaScript .

Getters-setters y encapsulación

La idea de getters y setters siempre se menciona junto con la encapsulación . La encapsulación se puede entender de dos maneras .

En primer lugar, es la configuración del trío data-getters-setters para acceder y modificar esos datos. Esta definición es útil cuando algunas operaciones, como la validación, tienen que realizarse en los datos antes de guardarlos o verlos: los captadores y los instaladores proporcionan el hogar perfecto para ello.

En segundo lugar, existe una definición más estricta según la cual la encapsulación se realiza para ocultar datos, para que sea inaccesible desde otro código, excepto a través de getters y setters . De esta forma, no terminamos sobrescribiendo accidentalmente datos importantes con algún otro código en el programa.

Crear getters y setters

1. Con métodos

Como los getters y los setters son básicamente funciones que captan / cambian un valor, hay más de una forma de crearlos y usarlos. La primera forma es:

 var obj = {foo: 'este es el valor de foo', getFoo: function () {return this.foo; }, setFoo: function (val) {this.foo = val; }} console.log (obj.getFoo ()); // "este es el valor de foo" obj.setFoo ('hello'); console.log (obj.getFoo ()); // "Hola" 

Esta es la forma más simple de crear getters y setters. Hay un foo propiedad y hay dos métodos: getFoo y setFoo para devolver y asignar un valor a esa propiedad.

2. Con palabras clave

Una forma más "oficial" y sólida de crear getters y setters es mediante el uso de las palabras clave get y set .

Para crear un getter, coloque la palabra clave get delante de una declaración de función que servirá como el método getter, y use la palabra clave set de la misma manera para crear un setter . La sintaxis es la siguiente:

 var obj = {fooVal: 'este es el valor de foo', get foo () {return this.fooVal; }, establecer foo (val) {this.fooVal = val; }} console.log (obj.foo); // "este es el valor de foo" obj.foo = 'hola'; console.log (obj.foo); // "Hola" 

Tenga en cuenta que los datos solo pueden almacenarse con un nombre de propiedad ( fooVal ) que es diferente del nombre de los métodos getter-setter ( foo ) porque una propiedad que contiene el captador no puede contener los datos también.

¿Qué camino es mejor?

Si elige crear getters y setters con palabras clave, puede usar el operador de asignación para establecer los datos y el operador de puntos para obtener los datos, de la misma manera que accedería / establecería el valor de una propiedad regular.

Sin embargo, si elige la primera forma de codificar getters y setters, debe llamar a los métodos setter y getter utilizando la sintaxis de llamada de función porque son funciones típicas (nada especial como los creados con las palabras clave get y set ).

Además, existe la posibilidad de que termine asignando accidentalmente algún otro valor a las propiedades que contenían esos métodos de obtención de objetos y los pierda por completo . Algo de lo que no tiene que preocuparse en el último método.

Entonces, pueden ver por qué dije que la segunda técnica es más sólida .

Sobrescribir la prevención

Si por alguna razón prefiere la primera técnica, haga que las propiedades que contienen los métodos getter setter sean de solo lectura creándolas usando Object.defineProperties . Las propiedades creadas mediante Object.defineProperties, Object.defineProperty y Reflect.defineProperty se configuran automáticamente como writable: false que significa solo lectura :

 / * Prevención de sobrescritura * / var obj = {foo: 'este es el valor de foo'}; Object.defineProperties (obj, {'getFoo': {value: function () {return this.foo;}}, 'setFoo': {value: function (val) {this.foo = val;}}}); obj.getFoo = 66; // ¡getFoo no va a sobrescribirse! console.log (obj.getFoo ()); // "este es el valor de foo" 

Operaciones dentro de getters y setters

Una vez que haya introducido los getters y setters, puede continuar y realizar operaciones en los datos antes de cambiarlos o devolverlos.

En el código siguiente, en la función getter los datos se concatenan con una cadena antes de ser devueltos, y en la función setter se realiza una validación de si el valor es un número o no antes de actualizar n .

 var obj = {n: 67, get id () {return 'La ID es:' + this.n; }, establezca id (val) {if (typeof val === 'number') this.n = val; }} console.log (obj.id); // "La ID es: 67" obj.id = 893; console.log (obj.id); // "La ID es: 893" obj.id = 'hola'; console.log (obj.id); // "La ID es: 893" 

Proteger datos con getters y setters

Hasta ahora, cubrimos el uso de getters y setters en el primer contexto de encapsulación. Pasemos al segundo, es decir, cómo ocultar datos del código externo con la ayuda de getters y setters.

Datos no protegidos

La configuración de getters y setters no significa que solo se pueda acceder y modificar los datos a través de esos métodos. En el siguiente ejemplo, se cambia directamente sin tocar los métodos getter y setter:

 var obj = {fooVal: 'este es el valor de foo', get foo () {return this.fooVal; }, establecer foo (val) {this.fooVal = val; }} obj.fooVal = 'hola'; console.log (obj.foo); // "Hola" 

No usamos el colocador pero cambiamos directamente los datos ( fooVal ) . ¡Los datos que inicialmente configuramos dentro de obj ya no están disponibles! Para evitar que esto suceda (accidentalmente), necesita cierta protección para sus datos. Puede agregar eso al limitar el alcance de donde están disponibles sus datos. Puede hacerlo mediante el análisis de bloques o el alcance funcional .

1. Alcance del bloque

Una forma es usar un alcance de bloque dentro del cual los datos se definirán usando la palabra clave let que limita su alcance a ese bloque.

Se puede crear un alcance de bloque colocando su código dentro de un par de llaves . Cada vez que cree un alcance de bloque, asegúrese de dejar un comentario arriba que pida que los refuerzos queden solos, de modo que nadie quite los refuerzos por error pensando que son algunos refuerzos adicionales redundantes en el código o agregue una etiqueta al alcance del bloque. .

 / * BLOCK SCOPE, deja las llaves en paz! * / {let fooVal = 'este es el valor de foo'; var obj = {get foo () {return fooVal; }, establecer foo (val) {fooVal = val}}} fooVal = 'hola'; // no afectará a fooVal dentro del bloque console.log (obj.foo); // "este es el valor de foo" 

Cambiar / crear fooVal fuera del bloque no afectará a fooVal referido dentro de los fooVal getters.

2. Alcance de funciones

La forma más común de proteger los datos con scoping es manteniendo los datos dentro de una función y devolviendo un objeto con los getters y setters de esa función.

 function myobj () {var fooVal = 'este es el valor de foo'; return {get foo () {return fooVal; }, establecer foo (val) {fooVal = val}}} fooVal = 'hola'; // no va a afectar a nuestro fooVal original var obj = myobj (); console.log (obj.foo); // "este es el valor de foo" 

El objeto (con el ajustador de foo() dentro de él) devuelto por la función myobj() se guarda en obj, y luego obj se usa para llamar al captador y al colocador .

3. Protección de datos sin alcance

También hay otra manera de proteger sus datos para que no se sobrescriban sin limitar su alcance . La lógica detrás de esto es la siguiente: ¿cómo se puede cambiar un dato si no se sabe cómo se llama?

Si los datos tienen un nombre de variable / propiedad no tan fácilmente reproducible, es probable que nadie (incluso nosotros mismos) termine sobrescribiéndolo asignando algún valor a esa variable / nombre de propiedad.

 var obj = {s89274934764: 'este es el valor de foo', get foo () {return this.s89274934764; }, establecer foo (val) {this.s89274934764 = val; }} console.log (obj.foo); // "este es el valor de foo" 

Mira, esa es una forma de resolver las cosas. Aunque el nombre que elegí no es realmente bueno, también puede usar valores aleatorios o símbolos para crear nombres de propiedades como lo propuso Derick Bailey en esta publicación de blog. El objetivo principal es mantener los datos ocultos de otros códigos y permitir que un par generador de cambios acceda a ellos o los actualice.

¿Cuándo debería usar getters y setters?

Ahora viene la gran pregunta: ¿empiezas a asignar getters y setters a todos tus datos ahora?

Si está ocultando datos, entonces no hay otra opción .

Pero si sus datos están siendo vistos por otro código, ¿todavía necesita usar getters setters solo para agruparlo con código que realiza algunas operaciones en él? Yo diría que sí . El código se suma muy pronto . La creación de microunidades de datos individuales con su propio eliminador de errores le proporciona cierta independencia para trabajar con dichos datos sin afectar a otras partes del código.

Compruebe el rendimiento y la calidad de cualquier sitio web con Faro

Google está a la vanguardia del diseño web moderno. Ofrece tantas herramientas desde Analytics hasta DevTools, todo con el objetivo de ayudar a las personas a crear una mejor web.Recientemente publicó otra herramienta útil llamada Lighthouse. Esta es una herramienta gratuita de prueba automatizada que se ejecuta en segundo plano de Chrome . Fu

(Consejos de tecnología y diseño)

10 plugins de WordPress para crear páginas de aterrizaje fácilmente

Si espera aumentar las ventas y las conversiones en su blog o sitio web, las páginas de destino son una de las mejores herramientas. Interactúan con los clientes, traen clientes potenciales y comercializan su producto sin necesidad de estar cerca de usted para que la acción suceda.Pero no todos nosotros tenemos las habilidades de diseño, el presupuesto y / o el diseñador para construir uno . Sin

(Consejos de tecnología y diseño)