Listo (Ctrl + Enter para ejecutar) Bootcamp Fullstack »
app.js
Tab = 4 espacios
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
Vista Previa
Consola Virtual JavaScript