Clases en JavaScript

Las clases en JavaScript permiten crear objetos y organizar el código de forma más clara y estructurada. Aunque su sintaxis se parece a la de otros lenguajes orientados a objetos, internamente se basan en el sistema de prototipos de JavaScript. Comprender cómo funcionan te ayudará a escribir código más reutilizable y escalable. 🚀

Índice

1. ¿Qué es una clase en JavaScript?

Una clase en JavaScript es una forma más clara y estructurada de crear objetos y manejar herencia.

Pero atención 👇
En JavaScript una clase no es un nuevo tipo de estructura interna, como en Java o C#.

EN REALIDAD: Una clase es una función especial con sintaxis más moderna y organizada.

NOTA! Aunque JavaScript usa un sistema de prototipos por debajo, las clases introducidas en ES6 (2015) nos permiten escribir código de forma más limpia y estructurada.

EJEMPLO RÁPIDO:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }  

saludar() {
    console.log("Hola soy " + this.nombre);
  }
}Lenguaje del código: JavaScript (javascript)

Internamente JavaScript crea algo muy parecido a esto:

function Persona(nombre) {
  this.nombre = nombre;
}

Persona.prototype.saludar = function() {
  console.log("Hola soy " + this.nombre);
};Lenguaje del código: JavaScript (javascript)

O sea…

🔎 Una clase es básicamente una función constructora con métodos en su prototype.

1.1. ¿Por qué se dice que es “azúcar sintáctico” sobre prototipos?

El término azúcar sintáctico significa: Una forma más simple o elegante de escribir algo que internamente ya existía.

Antes de ES6 (2015), para crear estructuras tipo “clase” se usaban:

Funciones constructoras
prototype
Manipulación manual de la herencia prototípica

Era más verboso y menos claro.

Las clases NO reemplazan el sistema de prototipos.
Solo lo envuelven con una sintaxis más limpia.

Internamente:

Los métodos siguen viviendo en Clase.prototype
La herencia sigue siendo prototípica
extends sigue usando la cadena de prototipos

Nada cambia en el motor. Solo cambia la forma de escribirlo.

2. Relación entre `class` y funciones constructoras

Cuando declarás una clase:

class Animal {}Lenguaje del código: JavaScript (javascript)

JavaScript crea:

Una función llamada Animal
Un objeto Animal.prototype
Una relación entre instancias y ese prototype

De hecho:

typeof Animal // "function"Lenguaje del código: JavaScript (javascript)

Las clases:

No pueden ejecutarse sin new
No pueden invocarse como función normal
Siempre funcionan como constructoras

Diferencia importante 👇

Una función constructora tradicional puede llamarse sin new (aunque sea mala práctica).

Una clase no:

class Persona {}
Persona(); // ❌ ErrorLenguaje del código: JavaScript (javascript)

Esto es una restricción agregada por la sintaxis class.

2.1. ¿Qué ocurre realmente en el prototype?

Este es el punto más importante conceptualmente.

Cuando declarás:

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }  

saludar() {
    console.log("Hola");
  }
}Lenguaje del código: JavaScript (javascript)

Internamente sucede esto:

1️⃣ Se crea una función Persona
2️⃣ Se crea un objeto Persona.prototype
3️⃣ El método saludar se guarda en Persona.prototype
4️⃣ Cuando haces new Persona(), el objeto creado tiene:

obj.__proto__ === Persona.prototype

Eso significa:

El método NO se copia en cada instancia
Se comparte desde el prototype
La búsqueda de métodos ocurre en la cadena prototípica

Es decir, si creamos la caden prototípica del código anterior:

instancia → Persona.prototype → Object.prototype → nullLenguaje del código: JavaScript (javascript)

La clase no elimina el prototipo.
Lo usa automáticamente por vos.

3. ¿Cómo funcionan las clases?

Para entender las clases en JavaScript, lo más útil es pensar en ellas como un molde de repostería. El molde (la clase) define la forma y el tamaño, pero no es algo que puedas comer; las galletas (los objetos o instancias) son los productos reales creados a partir de ese molde.

3.1. La estructura:

Dentro de ella, definimos cómo se verá y qué hará nuestro objeto.

3.1.1. El Constructor

Es el «punto de fabricación». Se ejecuta automáticamente en cuanto usas la palabra new. Sirve para asignar los valores iniciales a las propiedades del objeto.

3.1.2. Propiedades y Métodos

Propiedades: Son las características (color, nombre, precio).
Métodos: Son las acciones que el objeto puede realizar (correr, calcular, mostrar info).

3.1.3. Ejemplo de una clase:

class Heroe {
  // El constructor inicializa las propiedades
  constructor(nombre, poder) {
    this.nombre = nombre; 
    this.poder = poder;
  }

  // Esto es un método: una función dentro de la clase
  presentarse() {
    return `Soy ${this.nombre} y mi poder es ${this.poder}`;
  }
}

// Creamos una "instancia" (un objeto real)
const superman = new Heroe("Superman", "Volar");

console.log(superman.presentarse());  // Soy Superman y mi poder es VolarLenguaje del código: JavaScript (javascript)

4. Resumen sobre las clases

Una clase en JavaScript:

Es una función especial
Usa el sistema de prototipos internamente
Guarda métodos en prototype
Es azúcar sintáctico sobre funciones constructoras
No reemplaza la herencia prototípica
Solo la hace más clara y estructurada