Programación Orientada a Objetos en JavaScript

JavaScript no es un lenguaje orientado a objetos puro por varias razones, entre ellas:

1. No permite la creación de clases, sino de plantillas (Funciones constructoras –pseudo clases-)
2. Podemos tener funciones (function()) que no se encuentren encapsuladas en una clase, lo cual no es posible en un lenguaje de POO puro.
3. No hay soporte directo de herencia ni algunas formas de polimorfismo como sobrecarga de métodos

No obstante, hay algunos hacks o trucos para lograr algunos de estos comportamientos del paradigma P.O.O.

Adicionalmente, en JavaScript, existen varias formas de crear objetos/plantillas, la primera forma que veremos es con una función constructora, la segunda forma es con una notación literal de objetos, vamos a mezclar ambas para conocer un poco de las dos.

Descripción del dominio del problema:

El Banco XX, tiene 2 productos principales: cuentas corrientes y cuentas de ahorros, cada una de estas cuentas, tiene uno o más titulares, adicionalmente, los titulares pueden realizar consignaciones y retiros de las cuentas. El banco debe cobrar por sus servicios, cuando se realiza un retiro de una cuenta corriente, debe aplicarse un descuento del 3% sobre el capital objeto de retiro, cuando se hace sobre una cuenta de ahorros, el descuento debe ser del 1%.

El banco XX solicita un software que le permita conocer:

1. Se le debe permitir a los clientes abrir y cerrar cuentas, así como realizar las operaciones básicas sobre las mismas: consignar y retirar.
2. Total abonado en las cuentas de todo el banco.
3. Total abonado en las cuentas corrientes.
4. Promedio del valor guardado en las cuentas de ahorro.
5. Total de ganancias el banco (retiros cuenta corriente = 3%, retiro cuenta ahorro = 1%).

Inicialmente, vamos a modelar los conceptos básicos de nuestro sistema, este modelo conceptual nos permitirá abstraer los objetos relevantes del problema, sus propiedades, métodos y relaciones entre sí.

Modelado del negocio:

Para modelar los conceptos básicos del negocio, vamos a utilizar StarUML, que se puede descargar de aquí.

El diagrama conceptual queda definido de la siguiente manera, según las reglas de negocio que hemos especificado. Desde luego en un contexto real serían muchas más clases y operaciones.

Note que el método abrir(…) del objeto o plantilla (Cuenta), requiere un titular y un saldo inicial.

Codificando el caso de uso «Crear cuentas» en JavaScript:

Lo primero que haremos es crear el objeto banco mediante la segunda forma, es decir: «Notación literal de objetos»:

En La Notación Literal de Objetos, inicializamos el objeto como se ilustra en la línea 9, esto es un objeto que estamos definiendo directamente y a partir del cual no podremos crear instancias, en este caso solamente tendremos uno y solamente 1 banco (1 sola instancia).

Seguidamente, vamos a definir la plantilla Cuenta(…) con funciones constructoras que es la segunda notación para definir objetos, a diferencia de la notación literal, estas funciones constructoras, como su nombre lo indica, nos permiten crear varias instancias, es decir, podremos tener cuenta1, cuenta2… cuentan.

Un símil o correspondencia entre el modelo conceptual y nuestro código se vería así:

Vamos a utilizar la función constructora de Cuentas para crear una instancia denominada cuenta1 y verificar su comportamiento:

En las líneas 48 y 50, estamos imprimiendo unos mensajes en la consola del browser, estos mensajes no van dirigidos al usuario final, son solamente para depurar las aplicaciones.

Hasta el momento hemos abierto cuentas sin personas titulares, esto es un problema, dado que una cuenta debe tener al menos un titular, esto lo resolvemos creando otra función constructora «clase» denominada Titular:

Ahora que disponemos de la función constructora Titular, procedemos a crear los titulares que necesitemos y asociarlos a cada una de las cuentas, no obstante, por la calidad de nuestro software Orientado a Objetos, debemos validar que el titular no sea un objeto NULO y además que sea una instancia válida de la «clase» Titular, para ello modificamos el método abrir(…) de la función constructora, agregando las restricciones correspondientes:

En las validaciones del titular hemos incluido dos reglas sencillas:

1. El titular no debe NULO para poder abrir la cuenta.
2. Como JavaScript no es fuertemente tipado, utilizamos el operador instanceof con objeto de verificar que nuestro titular sea una instancia de la «clase» o función constructora Titular().

El código para probar lo que llevamos de nuestro programa es el siguiente:

En la prueba, hemos creado 2 cuentas (cuenta1 y cuenta2) cada una con un titular asociado (titular1 y titular2) respectivamente. Es de notar que no estamos validando los id’s de las cuentas ni los id’s de los titulares, estos valores no deberían repetirse, por efectos de extensión del blog, vamos a obviar esta parte. Al verificar los resultados de las pruebas, tenemos:

Una vez hemos abierto la cuenta satisfactoriamente, es necesario relacionar esta cuenta con el banco, de esta forma, cuando se haya abierto una cuenta, esta debe agregarse en el arreglo de cuentas del banco:

Creando la interface gráfica de usuario para el caso de uso «Crear cuentas»

Para mejorar nuestra aplicación Orientada a Objetos en JavaScript, vamos a definir una interface gráfica que permita a los usuarios finales registrar cuentas en el banco.

El HTML queda de la siguiente forma:

Y al ejecutar la aplicación, esta tiene el siguiente aspecto:

Gestionando los eventos provenientes de la interface gráfica de usuario para el caso de uso «Crear cuentas»

Los eventos son mensajes que se producen fruto de alguna acción, en este caso, un evento es el clic en el botón «Crear cuenta»:

Javascript nos provee los mecanismos necesarios para gestionar las acciones que vamos a realizar cuando se produce un evento (click, focus, change…etc.).

Lo primero que debemos hacer es capturar el evento de la carga del DOM (Document Object Model –Representación de objetos del documento HTML-), es decir, el momento cuando todos los elementos HTML (botones, campos de texto, tablas…etc.) se han cargado en memoria para poder asociarles eventos, debemos tener claro, que el botón «Crear cuenta» primero debe existir en la memoria del programa antes de codificarle el evento clic.

Así como disponemos de objetos creados por nosotros mismos (Banco, Cuentas, Titulares), JavaScript tiene sus propios objetos para que podamos interactuar con la interface de usuario, uno de estos objetos es «document» , este objeto nos permita interactuar con todo el documento de la página. Así que, inicialmente, queremos capturar el evento que nos indica que el «document» se ha cargado, esto lo hacemos sobre el objeto «document» de la siguiente forma:

En el código anterior, estamos capturando el evento denominado «DOMContentLoaded«, cuando este evento ocurre (Toda la página se ha cargado en memoria), se ejecuta la función que enviamos como segundo parámetro, dentro de esta función estamos imprimiendo en el log de la consola del browser la cantidad de elementos «td» que hay en nuestro documento, si el DOM no se hubiera cargado en su totalidad, el dato de la cantidad de columnas sería erróneo.

Ahora que el DOM se ha cargado (DOMContentLoaded) procedemos a programar el evento clic en el botón «Crear cuenta»:

En este fragmento de código recuperaremos el botón del documento y lo almacenamos en una variable:

Seguidamente le asociamos el evento clic a ese botón:

Con esto, hemos podido relacionar el botón del HTML con la programación, para esto nos sirve el DOM:

De igual forma procedemos para capturar del DOM, todos los datos del titular y la cuenta, con ello ya podremos crear las instancias de nuestros objetos Titular y Cuenta:

La relación entre el DOM y el código JavaScript queda de la siguiente manera:

Es de notar que la línea 122, nos permite imprimir el objeto banco con todos sus atributos, para efectos de depuración del programa :

Para finalizar, creamos el método en el objeto Banco para calcular el total de dinero que se ha depositado:

Ahora invocamos este método a raíz del clic en el botón «Total Recaudado en el banco».