Sección 3: JavaScript avanzado

Lección 11: Conceptos avanzados de objetos

En esta lección vamos a aprender algunos conceptos avanzados sobre objetos. Vamos a hablar sobre tres cosas que soy muy importantes en los objetos: el tipo de referencia, el contexto, y la instanciación.

Comencemos con el tipo de referencia. Veamos qué ocurre cuando ejecutamos algunas sentencias en la consola:

Es raro, ¿no? ¿No deberían ser iguales? Veamos otros ejemplos:

Ahora intentemos cambiar el atributo valor de objeto1, y hagamos algunas comparaciones.

Sigue pareciendo confuso, ¿no? Veamos qué es lo que realmente sucede.

En JavaScript, los objetos son llamados tipos de referencia. Todos los demás tipos de datos son conocidos como tipos primitivos, y estos incluyen los siete tipos que ya vimos: number, string, boolean, null, undefined y symbol.

Los tipos de datos primitivos son definidos por el lenguaje. Un tipo de referencia, el cual no es tipo primitivo, no es definido por el lenguaje de programación JavaScript, sino que son creados por los programadores. Veamos un ejemplo:

En el ejemplo anterior, cuando decimos creamos la variable numero1 y le asignamos el valor 1, JavaScript sabe lo que es el valor numérico 1, ya que es un número, un tipo primitivo de dato. Lo mismo ocurre cuando creamos la variable numero2 y le asignamos el valor 2.

Sin embargo, cuando creamos el objeto1 y definimos su atributo valor igual a 10, luego definimos el objeto2 y lo igualamos a objeto1, y finalmente definimos el objeto3 y definimos su atributo valor igual a 10, todos estos objetos son creados por el usuario, por lo tanto son tipos de referencia.

Cuando creamos el objeto1 lo que se crea es una caja que contiene todos los datos de este objeto. Dicha caja corresponde a un espacio de memoria de la computadora que se encuentra ejecutando el programa. El objeto1 hace referencia a esta caja que realmente contiene los datos.

Luego, al hace objeto2 igual a objeto1, lo que estamos haciendo es que el objeto2 haga referencia a la misma caja que hace referencia el objeto1. Luego al definir objeto3, lo que hacemos es generar una nueva caja en la memoria de la computadora que se encuentra ejecutando el programa.

Ahora intentemos modificar el valor del atributos de objeto1 para ver lo que ocurre.

Como podemos ver la modificación solo afectó al objeto2, ya que este hace referencia a la misma caja que el objeto1. En cambio el objeto3 no sufrió modificaciones porque su referencia se encuentra apuntando a otra caja.

Ahora volvamos al primer ejemplo de esta lección:

Esto demuestro que los arrays son objetos, por lo que en el ejemplo anterior cada array vacío genera una caja distinta en la memoria de la computadora, y por lo tanto no son iguales.

Ahora veamos el segundo concepto de esta lección: el contexto. El scope (alcance) y el contexto suelen confundirse, pero no son lo mismo. Como habíamos visto, el scope (alcance) se crea junto con la creación de una nueva función y de algún elemento que posea llaves.

Como podemos ver, no podemos acceder a la variable a desde fuera de la función. Eso es el alcance. Ahora, ¿qué es el contexto? El contexto nos indica dónde nos encontramos dentro de un objeto. Veamos un ejemplo.

Esta es la primera vez que vemos la palabra this. Es una palabra especial en JavaScript. Vemos que en el ejemplo la palabra this hace referencia al objeto window. Ejecutemos una comparación para verificar esto.

Vemos que obtenemos true. También podemos acceder a métodos del objeto window.

La palabra this representa al entorno del objeto donde nos encontramos actualmente. La mejor manera de expresarlo, es decir que el entorno de un objeto es todo aquello que se encuentra a la izquierda del punto.

En el caso del método alert, podemos ejecutar sin colocar la palabra window o la palabra this, ya que nos encontramos dentro del objeto window. Veamos un par de ejemplos más.

Como vemos, this sigue haciendo referencia al objeto window. Ahora veamos un segundo ejemplo, que establecerá un nuevo valor a this.

Ahora this es el objeto4, ya que es el objeto que contiene a la función a: objeto4.a

¿Por qué es tan importante el contexto? Es realmente muy importante cuando veamos instanciación. La instanciación es cuando hacemos una copia de un objeto y reusamos su código. Imaginemos que estamos desarrollando un juego online para múltiples jugadores. Este juego tendrá muchos jugadores. Podemos tener magos, ogros, guerreros y monstruos.

Si debemos crear un objeto por cada jugador, deberíamos repetir muchísimo código, lo cual no sería eficiente. Para resolver esto, vamos a usar la instanciación. Vamos a hacer instancias o múltiples copias de un objeto. Veamos cómo realizar la instanciación en JavaScript.

Vemos la nueva sintaxis. Definimos una clase con la palabra class y luego le asignamos un nombre el cual deberá comenzar por mayúsculas, debido a una convención que todos los desarrolladores usan. Pensemos en una clase como algo de lo que deseo hacer copias. Sigamos definiendo nuestra clase.

Vemos que lo primero que definimos dentro de la clase es una función llamada constructor. El constructor es una función que se llama automáticamente cada vez que creamos una nueva copia (instancia) de la clase Jugador. Este constructor es el encargado de crear y asignar valores a atributos de la clase.

También podemos añadir otras funciones a nuestra clase. Añadamos una nueva función para demostrarlo.

Por lo tanto cada copia que realice de la clase Jugador, podrá llamar a su método presentarse e imprimir por pantalla su mensaje personalizado. Cada jugador tendrá su propio nombre y su propio tipo.

La razón por la que usamos this dentro de cada función de la clase, es para poder acceder a las propiedades de la copia en particular a la que hace referencia el this.

Ahora veamos cómo crear una nueva clase a partir de la cual podamos crear muchas copias, pero que a su vez esta nueva clase reutilice el código clase de la clase Jugador.

Como podemos ver, para indicar que una clase es una copia de otra usaremos la palabra extends, la cual indica que la clase Mago extiende a la clase Jugador. El constructor de esta nueva clase llama al constructor de su clase Padre (Jugador) a través de la palabra super.

Al extender la nueva clase no solo es una copia de la anterior, sino que también puede añadir nuevos atributos y/o funciones. Añadamos a la clase Mago un nuevo método llamado jugar.

Ahora creemos un objeto a partir de la clase Mago:

Hemos creado dos constantes donde cada una almacena un objeto, el cual es una copia de la clase Mago, y donde además cada uno posee valores particulares en sus atributos. Tenemos un objeto llamado mago1 cuyo nombre es Santiago y es un mago de tipo sanador. También tenemos un objeto llamado mago2, el cual se llama Marcos y practica la magia oscura.

Ahora probemos hacer uso de los objetos que hemos creado:

También tenemos acceso al método presentarse:

Bueno, eso fue todo por esta lección.

Nos vemos en la siguiente.

¡Adios!