Introducción a clases y objetos en JavaScript

Ahora vamos a estudiar la POO en JavaScript. Consideremos un ejemplo de la vida real, y luego lo trasladaremos a JavaScript.

Como ejemplo, tomemos un automóvil. Este tiene ruedas, color, tipo de carrocería, cilindrada del motor y así sucesivamente. Además, el conductor puede darle comandos: moverse, detenerse, girar a la derecha, a la izquierda, etc.

Podemos decir que existe un clase de automóviles que posee propiedades comunes (todos tienen ruedas y a todos se les puede dar comandos).

Un automóvil concreto, estacionado en la calle - es un representante de esta clase, o, en otras palabras, un objeto de esta clase. Todos los objetos de esta clase tienen propiedades: número de ruedas, color, tipo de carrocería y métodos: moverse, detenerse, girar a la derecha, a la izquierda.

En otras palabras, la clase en sí es un plano, según el cual se fabrican los automóviles en la fábrica. El objeto es el automóvil en sí, fabricado según esos planos.

En JavaScript, una clase se crea usando la palabra clave class, seguida del nombre de la clase. Creemos la clase Car:

class Car {
	// aquí el código, es decir, el plano JavaScript del automóvil
}

Especificaremos ahora en nuestro plano que cualquier automóvil, creado según este plano, tendrá una propiedad para el color y una propiedad para la cantidad de combustible.

Para ello, dentro de la clase escribiremos la propiedad color y la propiedad fuel:

class Car {
	color; // color del automóvil
	fuel;  // cantidad de combustible
}

Ahora creemos los métodos de nuestra clase. En JavaScript, los métodos son similares a las funciones normales, solo que se declaran sin la palabra clave function.

Como se mencionó anteriormente, nuestro automóvil puede moverse, puede girar, puede detenerse. Creemos los métodos correspondientes en nuestra clase:

class Car {
	color; // color del automóvil
	fuel;  // cantidad de combustible
	
	// Comando moverse:
	go() {
		// algún código JavaScript
	}
	
	// Comando girar:
	turn() {
		// algún código JavaScript
	}
	
	// Comando detenerse:
	stop() {
		// algún código JavaScript
	}
}

Hemos creado el plano de nuestro automóvil. Ahora necesitamos ir a la fábrica y crear un objeto de esta clase (es decir, un automóvil concreto).

En JavaScript, esto se hace usando la palabra clave new, después de la cual se escribe el nombre de la clase:

new Car; // ordenamos a la fábrica que haga un automóvil

Sin embargo, si simplemente creamos un objeto de la clase - no conducirá a nada (es lo mismo que, por ejemplo, declarar un array y no guardarlo en ningún sitio). Necesitamos una variable para almacenar este objeto.

Dejemos que esta variable se llame myCar - guardemos en ella el objeto que hemos creado:

let myCar = new Car;

Después de crear el automóvil, se puede acceder a sus propiedades. El acceso a ellas se realiza mediante un punto. Establezcamos las propiedades de nuestro objeto:

let myCar = new Car; // ordenamos a la fábrica que haga un automóvil

myCar.color = 'red'; // pintamos de color rojo
myCar.fuel = 50;     // cargamos combustible

Listo, nuestro automóvil está creado, pintado y repostado. Ahora podemos darle comandos a través de los métodos de este automóvil.

El acceso a los métodos también se realiza mediante un punto, pero, a diferencia de las propiedades, después del nombre del método se escriben paréntesis. Demos órdenes a nuestro objeto:

myCar.go();
myCar.turn();
myCar.stop();