Advertisement
  1. Code
  2. ES6
Code

Programación orientada a objetos con JavaScript

by
Length:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Final product image
What You'll Be Creating

¿Estás familiarizado con el término "código espagueti"? Esta es una metáfora que puedes escuchar de desarrolladores que no usan JavaScript como una crítica a este lenguaje. Se trata de un código sin estructura. Estará conformado por línea tras línea de sentencias. Una parte del código puede estar encapsulada en funciones, mientras que otra parte no. Y, si tienes suerte, las 9,000 líneas de código estarán alineadas en una fila. Esta estructura de "espagueti" probablemente es el resultado de una programación por procedimientos.

En la programación por procedimientos las funciones se usan para llevar a cabo tareas. Necesitamos funciones, pero también necesitamos un diseño con el que podamos trabajar. Y si bien el espagueti es perfecto para la cena, no lo es para el código. El antídoto es la programación orientada a objetos. Para comprender este tipo de programación vamos a diseñar un programa, a definir clases y a crear objetos.

Diseñando un programa

Vamos a imaginar que te han asignado la tarea de crear una aplicación para una librería. Sólo por diversión vamos a llamar Amazonia a nuestra librería. Amazonia tendrá libros. Tendremos reseñas para los libros y también queremos poder buscar libros por autor. Habrán más características que querremos implementar en nuestra aplicación, pero estas son suficientes por ahora.

La programación orientada a objetos se enfoca en la creación de objetos. Entonces ¿cómo podemos traducir estos requisitos a objetos? Una técnica es crear una lista de sustantivos en base a nuestra descripción y después refinar la lista para obtener solamente aquellos que son relevantes para el problema. En nuestro problema mencionamos los siguientes sustantivos:

  • Aplicación
  • Librería
  • Libros
  • Reseñas
  • Autor

Aplicación es un sustantivo irrelevante, por lo que podemos excluirlo. También podemos descartar librería ya que es similar a aplicación. Si necesitáramos crear algo con múltiples librerías entonces podríamos conservarlo. Lo que nos queda es libros, reseñas y autores. (La palabra autores aparece en plural debido a que tendremos múltiples autores en esta aplicación).

Ahora veamos cómo diseñar cada clase. Una clase es una plantilla para crear objetos. La clase libro que crearemos nos proporcionará una plantilla para generar objetos de tipo libro.

Esto es similar a la forma en la que un arquitecto usa un plano para crear casas. El plano mostrará los dormitorios, los baños, la cocina y la sala de estar. Es posible construir muchas casas usando este plano. Sin embargo no todas tienen por qué ser iguales. Cada casa puede personalizarse cambiando la pintura, el piso o los accesorios, por ejemplo.

Tarea

Escribe las clases que usarías para el programa de un carrito de compras. Este deberá poder hacer lo siguiente:

  1. Guardar una lista de artículos.
  2. Agregar y quitar artículos del carrito.
  3. Calcular el total del carrito.
  4. Obtener la información del cliente.
  5. Crear un recibo de la compra.

Clases

Para diseñar nuestra clase libro (aparece con el nombre "Book" en el código de la clase mostrado más adelante) debemos considerar qué es lo que la clase debe saber y hacer. Para un libro necesitamos saber el título (aparece como "title" en el código), el autor (se muestra como "author" en el código) y el ISBN. Estos son nuestros atributos de datos.

Algunas cosas que la clase necesitará poder hacer son obtener y asignar el título, obtener y asignar el autor, así como obtener y asignar el ISBN. Estos serán los métodos de la clase. A continuación se muestra la forma en la que debe verse nuestra clase libro dados nuestros requisitos:

Por convención el nombre de la clase se escribe en mayúsculas. El constructor es una función especial que declara e inicializa los atributos de datos. Dentro de la función del constructor los atributos se agregan usando la palabra clave this. Después se listan los métodos de la clase sin separadores.

Los métodos que comienzan con get se conocen como métodos de acceso debido a que devuelven un valor. Los métodos que empiezan con set son métodos mutadores ya que almacenan o cambian el valor de un atributo.

Este es el formato general para definir una clase:

Una clase también puede ser declarada usando esta sintaxis:

Las clases también pueden tener métodos estáticos. Un método estático es aquel que es propiedad de la clase, no del objeto. Digamos que queremos crear un método estático en nuestra clase libro para generar identificadores. Esta es la sintaxis:

Para invocar al método:

Es lógico preguntarse cuándo y por qué querrías usar un método estático. No puedo afirmar que conozco una buena razón para usar métodos estáticos. Todo depende de la forma en la que diseñes tu clase. Un método estático puede usarse como un método auxiliar para tus objetos, pero en ese caso tales funciones podrían almacenarse en sus propias clases. Si conoces un buen caso de uso escribe lo que opinas en los comentarios.

Finalmente, para mantener la organización debes almacenar una clase como un módulo. Un módulo es simplemente un archivo que contiene tu código. Para convertir nuestra clase libro a módulo debemos añadir la instrucción export antes de la clase.

Para usar la clase Libro (Book) en otro archivo debemos importarla.

En donde los signos { } contienen los valores que fueron exportados del módulo, y from Book es una referencia al archivo Book.js.

Tarea

Define una clase para Autores y Reseñas.

Objetos

La clase por sí sola es inútil para nosotros a menos que hagamos algo con ella. Queremos crear libros, y para hacer eso tenemos que instanciar a la clase. Instanciar es el término técnico que define la creación de objetos nuevos. El objeto creado a partir de la clase se conoce como instancia. Esta es la forma en la que podríamos crear la nueva instancia de un libro:

Los objetos deben ser instanciados con el operador new. Los datos que se envían al objeto son los parámetros que definimos en nuestro constructor. Esta es la forma general para instanciar un clase:

Vamos a suponer que queremos agregar atributos a nuestra clase libro, tales como un identificador ("ID"), precio ("price") y la cantidad en inventario. Ahora tenemos seis parámetros en nuestro constructor, y eso no es lo mejor. No solamente es poco estético a la vista, sino que también ocasiona que los desarrolladores tengan que hacer un esfuerzo adicional al usar la clase, ya que estos deben saber el orden de los argumentos. Una mejor solución es enviar un objeto como argumento. Ejemplo:

Para instanciar al objeto:

En nuestro ejemplo también pudimos haber accedido al título con la instrucción book.title, ya que todos los atributos de la clase son públicos. Quizá ahora te preguntes por qué he creado todos esos métodos si podemos acceder a los atributos directamente. ¿Fue solamente para mostrarte la sintaxis? Así es. Además quiero mostrarte los beneficios de organizar tu código de esta forma.

La agrupación de código relacionado entre sí dentro de un objeto se conoce como encapsulación. Unos de los beneficios de la encapsulación es poder ocultar datos. Ocultar datos significa que los atributos de un objeto no pueden ser accedidos fuera de la clase.

En otros lenguajes, tales como Java y Python, podemos tener atributos y métodos privados. Ya que todos nuestros datos son públicos de forma predeterminada en una clase de JavaScript, no nos es posible aprovechar esta característica. A pesar de eso, debemos acceder a nuestros datos con métodos de acceso y mutadores. Una convención es colocar un guión bajo _ como prefijo en un atributo para indicar que es privado.

Tarea

Crea un objeto libro que use un objeto autor para establecer el valor del atributo autor.

Consideraciones finales

Hemos aprendido que una clase es una plantilla para crear objetos y que un objeto es una instancia de una clase. El beneficio de construir software a través de objetos es que éstos le proporcionan estructura a un programa, lo que permite que su administración sea más fácil.

Cuando tenemos un programa grande, fraccionarlo en objetos permite que sus partes sean desarrolladas y mantenidas independientemente de otras partes. Con esta modularidad se genera la reusabilidad. Dado que nuestro código está encapsulado, los objetos pueden usarse una y otra vez en otras partes del programa. Además tenemos una unidad de código que puede probarse. Mientras mejor probemos nuestro código, menos propenso será a errores.

Lectura adicional

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.