JavaScript
Explica cómo las clases crean instancias sobre el modelo de prototipos, comparten métodos y organizan constructores, campos, accessors y miembros estáticos.
Una clase es una sintaxis para crear objetos relacionados, inicializar sus propiedades y compartir métodos mediante prototipos.
class User {
constructor(name, role) {
this.name = name;
this.role = role;
}
greet() {
return `Hello, ${this.name}`;
}
}
const user = new User("Nicolás", "developer");Object.getPrototypeOf(user) === User.prototype; // true
Object.hasOwn(user, "greet"); // false
Object.hasOwn(User.prototype, "greet"); // trueLa sintaxis class no reemplaza el modelo prototípico de JavaScript. Lo organiza con reglas más claras para construcción, herencia, métodos y campos privados.
Decir que las clases son únicamente “azúcar sintáctica” puede ocultar diferencias importantes frente a funciones constructoras:
new.super.class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}La declaración crea un binding llamado Product.
No puede utilizarse antes de su inicialización.
new Product(); // ReferenceError
class Product {}La declaración participa en hoisting, pero permanece dentro de la Temporal Dead Zone hasta la línea de la clase.
Las clases también son valores.
const Product = class {
constructor(name) {
this.name = name;
}
};Una expresión puede tener un nombre interno.
const Product = class ProductModel {
static readInternalName() {
return ProductModel.name;
}
};ProductModel solo está disponible dentro del cuerpo de la clase.
const keyboard = new Product(
"Keyboard",
120,
);new:
Product.prototype.this.Una clase siempre requiere new.
Product("Keyboard", 120); // TypeErrorclass Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
}constructor inicializa una nueva instancia. Solo puede existir un constructor explícito por clase.
Si se omite en una clase base, JavaScript utiliza uno equivalente a:
constructor(...args) {}En una clase derivada, el constructor por defecto delega al padre:
constructor(...args) {
super(...args);
}Evita utilizar el constructor para trabajo asíncrono, red o inicialización que pueda quedar incompleta. Una factory asíncrona comunica mejor ese proceso.
const user = await User.createFromApi(id);class Cart {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
}
calculateTotal() {
return this.items.reduce(
(total, item) =>
total + item.price * item.quantity,
0,
);
}
}Los métodos se almacenan en Cart.prototype y se comparten.
const firstCart = new Cart();
const secondCart = new Cart();
firstCart.addItem === secondCart.addItem; // trueconst cart = new Cart();
const addItem = cart.addItem;
addItem({ name: "Keyboard" }); // TypeErrorLos métodos de clase siguen las reglas de this. Extraerlos elimina el receptor.
Opciones:
const addItem = cart.addItem.bind(cart);O diseñar una API con parámetros explícitos.
class Counter {
value = 0;
step = 1;
increment() {
this.value += this.step;
}
}Los campos públicos se crean como propiedades propias en cada instancia.
const counter = new Counter();
Object.hasOwn(counter, "value"); // true
Object.hasOwn(Counter.prototype, "value"); // falsePueden usar valores calculados desde la instancia.
class User {
createdAt = new Date();
constructor(name) {
this.name = name;
}
}Cada instancia obtiene su propia fecha.
Un campo de instancia crea un valor por objeto.
class Cart {
items = [];
}Cada carrito recibe un array distinto.
En cambio, poner un array mutable en el prototipo lo compartiría.
function Cart() {}
Cart.prototype.items = [];Todas las instancias encontrarían el mismo array heredado hasta que alguna cree una propiedad propia.
class Counter {
value = 0;
increment = () => {
this.value++;
};
}increment es una propiedad propia con una arrow function que captura la instancia.
Ventaja:
button.addEventListener(
"click",
counter.increment,
);No pierde this.
Costo:
firstCounter.increment === secondCounter.increment; // falseSe crea una función por instancia. Utilízalo cuando el binding automático aporte valor, no como regla general.
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
get area() {
return this.width * this.height;
}
set size({ width, height }) {
this.width = width;
this.height = height;
}
}const rectangle = new Rectangle(10, 5);
rectangle.area; // 50
rectangle.size = { width: 20, height: 4 };Los accessors se definen en el prototipo y utilizan la instancia como this.
No ocultes efectos inesperados o trabajo excesivo detrás de una lectura de propiedad.
const methodName = "calculateTotal";
class Cart {
[methodName]() {
return 0;
}
}La expresión se evalúa cuando se define la clase, no cada vez que se crea una instancia.
Los nombres calculados son útiles para symbols y protocolos.
class Collection {
*[Symbol.iterator]() {
yield* this.items;
}
}class User {
static createGuest() {
return new User("Guest", "viewer");
}
constructor(name, role) {
this.name = name;
this.role = role;
}
}Se llaman sobre la clase.
User.createGuest();No están disponibles en la instancia.
user.createGuest(); // TypeErrorCampos privados, miembros estáticos y bloques estáticos se profundizan en su propia nota.
function createEntityClass(type) {
return class Entity {
constructor(id) {
this.id = id;
this.type = type;
}
};
}
const Product = createEntityClass("product");
const Order = createEntityClass("order");Una clase puede retornarse, almacenarse y pasarse como cualquier otro valor.
Aun así, generar clases dinámicamente puede dificultar debugging y tipos. Úsalo cuando exista una necesidad real.
class Employee {
constructor(name) {
this.name = name;
}
describe() {
return this.name;
}
}
class Manager extends Employee {
constructor(name, team) {
super(name);
this.team = team;
}
}Una clase derivada debe llamar super() antes de utilizar this en su constructor.
La relación entre herencia, sobrescritura, super y composición se estudia en Herencia y composición.
class Account {
#balance = 0;
deposit(amount) {
this.#balance += amount;
}
}#balance es un campo privado del lenguaje, no una convención de nombre.
Se profundiza en Propiedades privadas y estáticas.
user instanceof User;instanceof suele comprobar si User.prototype aparece en la cadena de la instancia.
No valida la forma completa ni garantiza que el objeto provenga de datos confiables.
Para datos recibidos desde JSON, una clase no aparece automáticamente.
const data = JSON.parse(
'{"name":"Nicolás"}',
);
data instanceof User; // falseDebes reconstruir la instancia si el dominio lo necesita.
const user = new User(data.name, data.role);JSON.stringify(user);JSON serializa propiedades propias enumerables. Los métodos del prototipo no se incluyen.
Los campos privados tampoco se serializan automáticamente.
Una clase puede definir una representación explícita.
class User {
toJSON() {
return {
name: this.name,
role: this.role,
};
}
}Mantén separada la entidad viva de su formato de transporte cuando tengan necesidades distintas.
Usa un objeto literal cuando necesitas una estructura única o una configuración.
const configuration = {
retryCount: 3,
};Una clase puede aportar valor cuando:
No conviertas cada objeto de datos en una clase.
const order = new Order(data);instanceof y una identidad de tipo.extends.const order = createOrder(data);La elección depende del contrato y del dominio, no de una superioridad absoluta.
class Product {
#cost;
constructor({ id, name, cost, price }) {
if (!id) {
throw new TypeError("Product ID is required");
}
if (!name?.trim()) {
throw new TypeError("Product name is required");
}
this.id = id;
this.name = name.trim();
this.#cost = cost;
this.price = price;
}
calculateMargin() {
return this.price - this.#cost;
}
rename(name) {
if (!name?.trim()) {
throw new TypeError("Name is required");
}
this.name = name.trim();
}
}La clase protege invariantes y reúne comportamiento relacionado con el producto.
No realiza red ni persistencia; esas responsabilidades pueden vivir en servicios externos.
new.this.new y tienen Temporal Dead Zone..prototype.this, pero crean una función por instancia.¿Qué comparaciones son verdaderas?
class Counter {
value = 0;
increment() {
this.value++;
}
}
const first = new Counter();
const second = new Counter();first.value !== second.value no compara referencias porque son números, pero cada instancia tiene su propia propiedad value. first.increment === second.increment es true porque el método se comparte mediante Counter.prototype.
Propiedades privadas y estáticas explica qué pertenece a cada instancia, qué pertenece a la clase y cómo funciona la privacidad con #.