Introducción a JavaScript orientado a objetos

Por alguna razón, en la industria de TI hay una tendencia a considerar que si no está utilizando los métodos de Programación Orientada a Objetos (OOP), entonces no es un "programador real". En realidad, es una postura un tanto tonta, porque hay muchas situaciones en las que la POO no es la forma más adecuada de enfrentar un problema. Esta es la falla en lenguajes como Java que obligan a OOP en cada tarea de programación, ya sea que lo necesite o no.

JavaScript (que no tiene casi nada que ver con Java) es un lenguaje muy diferente. Proporciona libertad y versatilidad casi ilimitadas, con una complejidad reducida en la mayoría de las áreas. Desafortunadamente, hay algunas cosas que son más complicadas en JavaScript debido a la libertad que intenta darte.

La razón por la que la OOP no siempre es adecuada para cada tarea es que agrega más complejidad a un programa y, a menudo, implica pasos adicionales, más trabajo y más cosas que pueden salir mal si no estás prestando atención. Pero la OOP también puede proporcionar muchas ventajas si se usa en situaciones donde es apropiado.

La ventaja más importante que OOP puede ofrecernos es la replicación, lo que significa que podemos clonar un objeto y reutilizarlo varias veces en el mismo programa, siempre que lo necesitemos. La complejidad implícita, y el hecho de que JavaScript no se ha creado desde el principio para ser un lenguaje OOP (y por lo tanto agrega más complejidad), es una de las razones por las que OOP representa la última frontera para muchos programadores de JavaScript incipientes antes de que ganen sus alas.

Ok, es difícil, pero no es tan difícil

Antes de comenzar a pensar que el concepto de JavaScript orientado a objetos es demasiado para usted, tenga en cuenta que ya está usando OOP, incluso si no lo conoce. Los puristas pueden estar en desacuerdo, pero creo que es justo decir que si ya está usando HTML y CSS, y ocasionalmente ha usado JavaScript para manipular elementos HTML en una página web, entonces usted ya es un programador experimentado de OOP.

Cada elemento HTML en una página web es en realidad un objeto. Todos encajan en la jerarquía del Modelo de objetos de documento (DOM), lo que significa que tienen una clase definida, propiedades definidas y herencia definida. A menos que establezca explícitamente un valor de propiedad, todos los objetos utilizarán sus valores de propiedad predeterminados. Cuando escribes una instrucción CSS, lo que realmente sucede es que estás utilizando un método para modificar uno o más valores de propiedad de una clase.

Cada vez que escribes una instrucción HTML, creas una nueva instancia de una clase. Y como seguramente ya sabrá, puede crear sus propias clases basadas en la clase predefinida de cada tipo de objeto (por ejemplo, puede crear <h2 class = "subheading"> que pueden tener propiedades muy diferentes de la clase original fue creado a partir de). Puede especificar que los objetos H2 con esta clase tengan un color y tamaño diferente de los objetos H2 normales. Y puede reutilizar esos objetos modificados con la frecuencia que desee. El objeto H2 original es una plantilla de objeto y su nueva clase se deriva de la clase de plantilla.

Entonces, sí, OOP no es fácil, pero probablemente ya lo estés haciendo, entonces, ¿a qué hay que temer?

El siguiente nivel: creando tus propios objetos.

Trabajar con objetos DOM incorporados es demasiado fácil. Necesitas más retos. Hacer tus propios objetos es el primer paso hacia un nivel más alto de POO.

Con todo ese preámbulo, probablemente esperas que crear un objeto sea un gran problema que requiera una gran cantidad de código complejo. Ciertamente, si alguna vez ha intentado crear clases de objetos personalizados en un lenguaje como Java o C #, esperará crear un constructor de clases largo. Así es como lo hacemos en JavaScript:

Bueno, eso fue anti-climático, ¿eh? Lo que hicimos allí fue crear un objeto vacío de la clase "myObject". Obviamente, los objetos vacíos son aburridos, porque no hacen nada, excepto ocupar espacio en la memoria. Para ser útil, un objeto necesita tener contenidos. Consideremos una clase más práctica:

Lo anterior muestra un objeto llamado objAlien que tiene todas estas propiedades diferentes (variables ordinarias) y métodos (función) definidos dentro de él. Técnicamente, entonces, también podría considerar que un objeto es una matriz de variables y / o funciones.

Usando objetos en un programa

Una vez que se ha definido un objeto, puede referenciarlo en sus programas. En un juego, tendrías múltiples alienígenas, pero escribir código para cada alienígena individual haría que el programa sea demasiado engorroso. Una mejor manera es crear una matriz para almacenar todos los alienígenas y luego usar la clase alienígena para crear nuevos alienígenas. Por ejemplo:

Este código haría que los extraterrestres ecológicos 20 los separaran con píxeles 110 (por lo que podemos suponer que la imagen utilizada para almacenar el alienígena es 100px de ancho, y hay un margen 10px entre cada alienígena). Obviamente, por supuesto, esta no es una buena manera de implementar un juego en JavaScript porque existen mejores técnicas, pero este artículo no trata de crear juegos, sino de crear y usar objetos.

Los objetos no siempre tienen que agregarse con la nueva palabra clave. Aquí hay una muestra de código de un proyecto donde un objeto establece sus propias propiedades usando los valores de otro objeto:

Aquí podemos ver una forma realmente compleja de usar un objeto, donde los valores del objeto se pasan a la propiedad attr del objeto R. Si está familiarizado con JSON (Notación de objetos de JavaScript), puede pensar que la primera parte del ejemplo es usar JSON con errores de sintaxis, pero en realidad no es un código JSON.

La razón por la que se citan los nombres de variable, excepto el relleno, es para evitar que JavaScript procese el operador menos en los nombres de variable (que son propiedades de CSS). Desde que se escribió ese programa, se realizaron cambios para permitir que las propiedades CSS como font-family se escriban como fontFamily, pero este código heredado no se ha adaptado para aprovechar ese cambio.

¿Por qué usar objetos?

Los objetos son mejores para situaciones en las que necesita crear varias instancias de algo, o donde necesita una forma sencilla de agrupar datos relacionados con algo de un tipo particular. En el ejemplo de juego anterior, podemos ver que fue posible crear múltiples copias del objeto objAlien, pero también podemos manipular las propiedades del objeto después de agregarlo, que en el caso del ejemplo era la propiedad x.

¿Cuándo no usar objetos?

No debes usar objetos si el proyecto no los necesita realmente. No tiene sentido complicar en exceso sus programas sin una buena razón. Si su programa está diseñado para hacer algo simple, no deberían requerirse técnicas de OOP.

Por qué los objetos de JavaScript son más fáciles de crear que los objetos en otros idiomas OOP

En lenguajes como Java e incluso Visual Basic, crear objetos es una gran tarea. Esto se debe a que necesita crear una plantilla de clase (o usar una existente) para basar su objeto antes de que pueda definirlo. Eso no es necesario en JavaScript porque se nos da una técnica de construcción simple (nombre de objeto = {…}). Los objetos en JavaScript también pueden incluir cualquier tipo de variable, incluidas las matrices, y las declaraciones de tipos no existen. Los valores de retorno son opcionales.

Si es algo bueno o malo es una cuestión de debate, pero los programas de JavaScript tampoco fallarán si intentas recuperar un valor de propiedad que no existe. Por ejemplo, si escribiste:

Esperaría con razón que la línea de código anterior coloque 5 dentro del elemento con ID "par1". Pero si tuvieras que escribir algo como:

No verías el sabor favorito del alienígena, verías aparecer indefinido en par1. Para la mayoría de las aplicaciones, esto no sería un problema, pero para algunas lo sería. En esos casos, debe estar preparado para eso y escribir un código que pruebe valores válidos antes de confiar en ellos.

Una forma de probar esto es:

Esa respuesta es un poco extrema, pero entiendes la idea. Observe que estamos probando "! ==" y no "! =", Lo cual es algo fácil de confundir. Aquí hay otra manera de hacerlo:

Lo mismo, de manera diferente. También puede agregar propiedades a los objetos después de crearlos. Puedes hacerlo de esta manera:

Obviamente, también puede cambiar los valores de las propiedades de la misma manera. Para eliminar la propiedad favoriteFlavor del objeto, deberíamos hacer esto:

Hay muy pocas situaciones en las que esto sea necesario.

Haciendo los objetos más reutilizables

Probablemente haya notado el mayor problema potencial con la creación de objetos, que es que si quisiera tener diferentes tipos de alienígenas, tendría que convertir la propiedad objAlien.type en una matriz. Pero hay otra manera, que es mejor.

Esta técnica se denomina creación de prototipos de objetos, lo que significa que crea una plantilla básica para el objeto pero no completa todos los detalles. Aquí también, nos estamos acercando a la forma real de agregar objetos a un juego.

Ahora puede ver que los métodos del objeto están definidos, pero la mayoría de las propiedades no están definidas. Además, en lugar de ser una variable simple, la declaración del objeto ahora está envuelta dentro de una función, y eso es porque en realidad no es un objeto todavía. Es solo un prototipo de un objeto, que describe cómo crear el objeto sin crearlo realmente.

Así que ahora para crear objetos basados ​​en el prototipo, podemos hacer esto:

Esto es lo mismo que hacer esto:

Debido a que creamos un prototipo, no tuvimos que hacerlo de la segunda manera, y declarar diferentes tipos de alienígenas con diferentes velocidades, cantidad de armas, armas y posiciones iniciales es mucho más fácil.

¿Qué sigue?

Este artículo fue una introducción a JavaScript orientado a objetos, que, con suerte, desmitificó el tema y lo hizo parecer menos intimidante. Cubrimos todos los conceptos básicos, incluyendo cómo crear objetos simples, cómo agregar, eliminar y modificar propiedades, cómo declarar y usar métodos y cómo usar la creación de prototipos para hacer que los objetos sean más fáciles de reutilizar. Pero todavía hay mucho más que aprender, por lo que ahora que tiene un buen punto de partida, podrá abordar cualquier tutorial o lección sobre OOP más avanzados con confianza.

Bogdan Rancea

Bogdan es miembro fundador de Inspired Mag, habiendo acumulado casi 6 años de experiencia durante este período. En su tiempo libre le gusta estudiar música clásica y explorar artes visuales. También está bastante obsesionado con los fixies. Ya es dueño de 5.