Easy JavaScript Parte 8: ¿Qué son los Getters y los Setters?

En primer lugar, se utiliza un establecedor para establecer el valor de una propiedad. Se llama a un establecedor cada vez que se cambia el valor de la propiedad. En otras palabras, ejecuta una función cada vez que se cambia una propiedad utilizada dentro de la función establecedora. Echa un vistazo al siguiente código:

var foo = {
    set cal(x) {
        this.a = x + 5
    },
    a: undefined
}
 
foo.cal = 8;
console.log(foo.a);

En el objeto foo, se llamará al setter cal cada vez que se cambie la propiedad a. Como salida, obtendrá 13 impresos. Al crear un establecedor, debe seguir estas reglas:

1. El nombre de un establecedor puede ser una cadena o un número.
2. Un establecedor debe tener exactamente un parámetro de entrada.
3. Solo debe haber un establecedor con el mismo identificador en un objeto
4. Puede eliminar un establecedor mediante el operador delete

Para ver otros ejemplos de un establecedor, echemos un vistazo al siguiente código:

var greet = {
    set welcome(m) {
        this.msg = this.msg + m;
    },
    msg: "Hello "
}
greet.welcome = "Jaosn";
console.log(greet.msg);

Para el fragmento de código anterior como salida, se imprimirá Hello Jason. También puede agregar el establecedor a un objeto existente mediante Object.defineProperty. Digamos que tienes un objeto foo:

var foo = {
    num: 0
}

Ahora, para agregar un establecedor para el objeto existente foo, use Object.defineProperty.

Object.defineProperty(foo, 'cal', {
    set: function (x) {
        this.num = this.num + x;
    }
});
foo.cal = 9;
console.log(foo.num); //9

Arriba, está agregando un establecedor a un objeto existente y obtendrá 9 como salida.

JavaScript Getter

Con un captador de JavaScript, puede llamar a una función cada vez que realiza una lectura de propiedades. Por lo tanto, si desea llamar a una función, JavaScript usará un captador cada vez que se busque un objeto. Considere el siguiente código:

var cal = {
    num: 0,
    get add() {
        return this.num + 5;
    }
}
console.log(cal.add);

En el código anterior, la salida será el valor calculado de la propiedad num. Principalmente, vas a usar getters para leer el valor de una propiedad que devuelve un valor calculado dinámicamente. Si necesita leer el valor de una propiedad en función de los siguientes criterios:

1. La propiedad devolverá un valor calculado dinámico
2. El valor interno de la propiedad no debe reflejarse sin llamar explícitamente a un método

Para cumplir estos dos requisitos, debe utilizar un captador. Considere el siguiente código:

var foo = {
    name: 'jason',
    get Name() {
        return this.name + " beres";
    }
}
console.log(foo.Name);

En el código anterior, se usa un captador para calcular el valor de la propiedad name. Aquí obtendrá la salida jason beres.

Al crear un captador, debe recordar las siguientes reglas:

1. Un nombre de captador puede ser una cadena o un número.
2. Un getter no debe tener ningún parámetro de entrada, debe tener exactamente cero parámetros.
3. Solo debe haber un captador con el mismo identificador en un objeto
4. Puede eliminar un captador mediante el operador delete

 

También puede agregar un captador a un objeto existente mediante Object.defineProperty.  Digamos que tienes un objeto foo:

var foo = {
    num: 1
}

Para agregar un captador para el objeto foo existente, use Object.defineProperty.

Object.defineProperty(foo, 'numgetter',
    {
        get: function () {
            return this.num + 1;
        }
    });
console.log(foo.numgetter); //2

Como puedes ver arriba, estás agregando un getter a un objeto existente y tu salida será 2.

Conclusión

Es necesario tener una buena comprensión de getters y setters para trabajar con objetos en JavaScript. Con un establecedor, puede llamar a una función cada vez que se cambia el valor de una propiedad y, con un captador, puede devolver el valor calculado de una propiedad. ¡Y eso es todo!

No olvide consultar Ignite UI para JavaScript/HTML5 y ASP.NET MVC, que puede usar con HTML5, Angular, React y ASP.NET MVC para crear aplicaciones de Internet enriquecidas. ¡Puede descargar una versión de prueba de todos nuestros controles JavaScript de forma gratuita!