Las Clases usando Funciones

En JavaScript, antes de que se introdujeran las clases en ES6 (ECMAScript 2015), los desarrolladores creaban estructuras similares a clases utilizando funciones constructoras. Aunque ahora tenemos una sintaxis más moderna con class, es importante entender cómo se pueden crear clases usando funciones, ya que es una base fundamental del lenguaje.

En librerías o frameworks como react, se usan funciones constructoras para crear componentes (en lugar de clases).

1. Qué es una función constructora? #

Una función constructora es una función especial que se usa para crear objetos. Estas funciones actúan como "plantillas" para crear múltiples objetos con la misma estructura y propiedades.

¿Cómo crear una clase con una función constructora? #

1. Definir la función constructora:
   • La función constructora se define como cualquier otra función, pero por convención, su nombre empieza con una letra mayúscula para indicar que es un constructor.
   • Dentro de esta función, this se refiere al nuevo objeto que se está creando.
   • Usamos this para asignar propiedades al objeto.

Ejemplo de una función constructora:

 
1function Persona(nombre, edad) {
2  this.nombre = nombre;
3  this.edad = edad;
4}
5
6let persona1 = new Persona("Juan", 30);
7let persona2 = new Persona("Ana", 25);
8
9console.log(persona1.nombre); // Muestra "Juan"
10console.log(persona2.edad);   // Muestra 25
Salida de consola
Juan
25

En este ejemplo:

• Persona es una función constructora que define dos propiedades: nombre y edad.
• persona1 y persona2 son objetos creados usando new Persona(), cada uno con sus propios valores para nombre y edad.

2. Agregar métodos a la función constructora:
   • Los métodos (funciones que pertenecen a un objeto) pueden ser añadidos a los objetos creados con la función constructora utilizando this.

Ejemplo de función constructora con métodos:

 
1function Persona(nombre, edad) {
2  this.nombre = nombre;
3  this.edad = edad;
4
5  this.saludar = function() {
6    console.log("Hola, mi nombre es " + this.nombre);
7  };
8}
9
10let persona1 = new Persona("Juan", 30);
11persona1.saludar(); // Muestra "Hola, mi nombre es Juan"
Salida de consola
Hola, mi nombre es Juan

En este ejemplo:

• La función saludar es un método de Persona. Cada vez que se crea un objeto Persona, ese objeto tendrá su propia copia del método saludar.

3. Uso del prototipo (prototype):
   • Puedes agregar métodos a todos los objetos creados por una función constructora utilizando prototype. Esto es más eficiente que definir los métodos directamente dentro de la función constructora, ya que todos los objetos comparten la misma función en lugar de tener copias separadas.

Ejemplo de uso de prototype:

 
1function Persona(nombre, edad) {
2  this.nombre = nombre;
3  this.edad = edad;
4}
5
6Persona.prototype.saludar = function() {
7  console.log("Hola, mi nombre es " + this.nombre);
8};
9
10let persona1 = new Persona("Juan", 30);
11let persona2 = new Persona("Ana", 25);
12
13persona1.saludar(); // Muestra "Hola, mi nombre es Juan"
14persona2.saludar(); // Muestra "Hola, mi nombre es Ana"
Salida de consola
Hola, mi nombre es Juan
Hola, mi nombre es Ana

En este ejemplo:

• Persona.prototype.saludar define el método saludar en el prototipo, lo que significa que todos los objetos Persona comparten la misma función, ahorrando memoria.