1
// 1. Demostración de call() y apply()
const presentador = {
formatear(saludo, despedida) {
return `${saludo}, soy ${this.nombre} (${this.rol}). ${despedida}`;
}
};
const desarrollador = { nombre: "Carlos", rol: "Backend Lead" };
const disenador = { nombre: "Valeria", rol: "UI/UX Specialist" };
console.log("=== 1. ENLACE EXPLÍCITO CON CALL Y APPLY ===");
// Prestamos el método a desarrollador:
console.log(presentador.formatear.call(desarrollador, "¡Hola a todos!", "¡Hasta luego!"));
// Prestamos el método a disenador usando apply con un array:
console.log(presentador.formatear.apply(disenador, ["Buenos días", "Que tengan un gran día"]));
// 2. Demostración de .bind() para Callbacks
console.log("\n=== 2. FIJACIÓN PERMANENTE CON .BIND() ===");
class GestorNotificaciones {
constructor(modulo) {
this.modulo = modulo;
// Fijamos el contexto permanentemente:
this.despachar = this.despachar.bind(this);
}
despachar(mensaje) {
return `[Módulo: ${this.modulo}] Alerta: ${mensaje}`;
}
}
const gestorAuth = new GestorNotificaciones("Autenticación & Seguridad");
const funcionExtraida = gestorAuth.despachar; // Función extraída suelta
// Aunque se ejecute suelta, .bind() garantizó que 'this' no se pierda:
console.log(funcionExtraida("Intento de inicio de sesión sospechoso"));
// 3. Demostración de Arrow Functions (Enlace Léxico)
console.log("\n=== 3. ARROW FUNCTION COMO MÉTODO DE CLASE ===");
class Reloj {
tiempo = 0;
// Al declararse como función flecha, 'this' queda ligado a la instancia:
tick = () => {
this.tiempo++;
return `⏰ Reloj activo: ${this.tiempo} seg`;
};
}
const miReloj = new Reloj();
const tickSuelto = miReloj.tick;
// Funciona perfectamente sin .bind() gracias al enlace léxico:
console.log(tickSuelto());
console.log(tickSuelto());
Haz clic para editar este código