Clases de JavaScript
Las clases ofrecen una sintaxis para definir objetos con constructor y métodos. new crea una instancia; la demo termina mostrando tea / regular / mint.
Definir una clase y su constructor
El constructor se ejecuta al crear una instancia y prepara sus campos.
class Drink {
constructor(name, size) {
this.name = name;
this.size = size;
}
}
const order = new Drink("tea", "regular");
El constructor guarda los valores en el objeto nuevo. this se refiere a la instancia actual y new Drink(...) ejecuta el constructor.
Añadir un método de instancia
Los métodos describen acciones que las instancias pueden realizar.
class Drink {
constructor(name, size) {
this.name = name; this.size = size;
}
label() { return this.name + " / " + this.size; }
}
const order = new Drink("tea", "regular");
console.log(order.label());
order.label() devuelve tea / regular. Los métodos de clase viven en el prototipo y se comparten entre las instancias.
Extender una clase
extends crea la relación de herencia, super(...) llama al constructor padre y super.label() usa el método heredado.
class SpecialDrink extends Drink {
constructor(name, size, extra) {
super(name, size); this.extra = extra;
}
fullLabel() { return super.label() + " / " + this.extra; }
}
const special = new SpecialDrink("tea", "regular", "mint");
console.log(special.fullLabel());
SpecialDrink hereda label() y añade extra y fullLabel(). El resultado es tea / regular / mint. Un constructor derivado debe llamar a super(...) antes de usar this.
Métodos estáticos y campos privados
Un método estático pertenece a la clase, no a sus instancias. Un campo como #secret solo se puede leer dentro de la clase.
class Drink {
static kind() { return "drink"; }
#secret = "recipe";
reveal() { return this.#secret; }
}
console.log(Drink.kind());
console.log(new Drink().reveal());
Llama al método estático como Drink.kind(), no como new Drink().kind(). Fuera de la clase, drink.#secret no es accesible.
Ver las clases en una página
Esta demo completa escribe el resultado de una instancia especial en el documento.
<p id="result"></p>
<script>
class Drink {
constructor(name, size) { this.name = name; this.size = size; }
label() { return this.name + " / " + this.size; }
}
class SpecialDrink extends Drink {
constructor(name, size, extra) { super(name, size); this.extra = extra; }
fullLabel() { return super.label() + " / " + this.extra; }
}
const order = new SpecialDrink("tea", "regular", "mint");
document.querySelector("#result").textContent = order.fullLabel();
</script>
La página muestra exactamente tea / regular / mint. Una declaración de clase no está disponible antes de su declaración: esa zona es la temporal dead zone, no una promesa de hoisting.
Las clases organizan la creación y el comportamiento de objetos. No son módulos, que organizan archivos, ni un método escrito directamente en un objeto. Usa new para instancias y static para comportamiento de la clase.
📊 Características de las clases
| Sintaxis | Propósito | Ejemplo |
|---|---|---|
constructor(...) |
Inicializar una instancia | constructor(name, size) |
this |
Referirse a la instancia actual | this.name = name |
extends y super |
Reutilizar comportamiento padre | class SpecialDrink extends Drink |
static |
Definir un método de clase | Drink.kind() |
La tabla resume la sintaxis esencial de clases usada en esta lección.
Ejercicio práctico
Crea Drink con name, size y label(). Después crea SpecialDrink con extends, añade extra y haz que fullLabel() muestre tea / regular / mint. Llama también a Drink.kind().
Errores comunes
No llames un método de instancia sobre la clase, no olvides super(...) en el constructor derivado y no uses this antes de super(...).
Idea clave
El constructor inicializa campos, los métodos se comparten mediante el prototipo y la herencia reutiliza comportamiento.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior