Objetos eficientes en JavaScript

JavaScript-logoHace mucho que no posteo, así que para modificar un poco la racha, vamos con un post rápido sobre JavaScript.

 

 

 

Hablemos de objetos

En JavaScript resulta relativamente fácil crear objetos. Sin tanta sintaxis decorativa, una simple función puede hacer el trabajo:

var A = function () {
}

var B = new a();

Y con esto, ya tenemos una “instancia” de A en B. Nada complicado en absoluto. Pero veamos que pasa a medida que agregamos algunas funciones internas.

var A = function () {
    var self = this;
    this.f1 = function () {};
}

var B = new A();
var C = new A();

En este caso, tal vez no notemos diferencia alguna, pero existen, y pueden ser causantes de pequeños grandes problemas que no notemos hasta que sea tarde, y que no nos demos cuenta de cómo solucionarlos.

El problema

El problema radica en que, para el puntero “f1”, estamos asignando una función anónima particular. Esto quiere decir que B y C tendrán, cada una de ellas, su propia función anónima apuntando a f1, por lo que, mientras más objetos de A creemos, más funciones anónimas tendremos. Aunque la función sea exactamente la misma.

Una forma de resolverlo

Podemos resolver este problema con algo de sintaxis más orientada a JavaScript y menos a la programación orientada a objetos clásica.

La clave es “prototype”. Aunque no pretendo meterme en el fango tratando de explicar todo lo relacionado a este concepto (Tal vez en otro momento), si lo usaremos para solucionar el problema planteado.

var A = (function() {
   var _a = function () {};

   _a.prototype.f1 = function () {};

   return _a;
})();

De cara a la instanciación de nuevos objetos no tendremos que hacer nada. Ahora, el truco está dentro de la función que hemos creado.

En este caso, la variable A, que contendrá la firma de nuestra “clase”, recibe el resultado de la ejecución de una función anónima. Notemos que la función está contenida entre paréntesis y al final de la misma se ejecuta su contenido con el uso de ().

Entonces, JavaScript ejecutará la función anónima en el mismo momento que lea el código, retornando _a.

_a es una variable interna que representa el objeto en sí. O sea, el que posee la firma de nuestra clase. En la primer línea vemos que _a apunta a una función anónima. Teniendo esto, y mediante el uso de prototype, podemos crear entradas a _a, que serán compartidas por todos los objetos creados de A.

En definitiva, al usar prototype solo tenemos UNA única función y todas las instancias de A usan la misma referencia o apuntan a ella sin duplicar la funcionalidad.

Como resumen rápido podemos decir que, cuando trabajamos con JavaScript, podemos caer fácilmente en el consumo de memoria sin necesidad, sin que nos demos cuenta. Y que necesitaremos conocer algunos trucos para poder optimizar nuestro código.

En este caso, la palabra clave es “prototype”, que no solo nos salvará en estos casos, si no que en muchas otras.



Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s