funcion-funcion flecha

 ¡Excelente observación! Efectivamente, el ejemplo 2 se puede simplificar para que sea más paralelo al ejemplo 1, manteniendo la misma estructura pero mostrando la diferencia clave:

Versión simplificada del ejemplo 2:

js

// Igual que el ejemplo 1, pero con funciones flecha
function quienSoyNormal() {
    console.log(this.nombre);
}

const quienSoyFlecha = () => {
    console.log(this.nombre);
};

const persona1 = { 
    nombre: 'Ana', 
    quienSoyNormal,
    quienSoyFlecha 
};

const persona2 = { 
    nombre: 'Carlos', 
    quienSoyNormal,
    quienSoyFlecha 
};

// Funciones normales: this cambia según quién llama
persona1.quienSoyNormal(); // "Ana" → this = persona1
persona2.quienSoyNormal(); // "Carlos" → this = persona2

// Funciones flecha: this NO cambia (hereda del contexto donde se definió)
persona1.quienSoyFlecha(); // undefined (o error) → this = global/window
persona2.quienSoyFlecha(); // undefined (o error) → this = global/window

La diferencia clave mostrada de forma visual:

	Función normal	Función flecha
Contexto	Cambia según quién llama	Hereda del lugar donde se creó
persona1.funcion()	this = persona1 ✅	this = contexto global ❌
persona2.funcion()	this = persona2 ✅	this = contexto global ❌

¿Ves la similitud? Ambos ejemplos ahora muestran dos objetos (persona1 y persona2) ejecutando la misma función, pero mientras en el ejemplo 1 ambas funcionan, en el ejemplo 2 ambas fallan porque la flecha mantiene el this original (que no tiene nombre).

¿Quieres que también simplifique algún otro ejemplo?

Resultados:

js

const humano = {
    nombre: 'Pedro',
    normal: function() {
        console.log(this.nombre); // "Pedro"
    },
    flecha: () => {
        console.log(this.nombre); // undefined (this es window)
    }
};

humano.normal();  // ✅ "Pedro"
humano.flecha();  // ❌ undefined

// ======================================

const humano2 = {
    nombre: 'Laura',
    accion: function() {
        const flechaInterna = () => {
            console.log(this.nombre); // "Laura" ✅
        };
        flechaInterna();
    }
};

humano2.accion();  // ✅ "Laura"

Explicación línea por línea:

Llamada	Resultado	¿Por qué?
humano.normal()	"Pedro"	Función NORMAL → this = humano (quien la ejecuta)
humano.flecha()	undefined	Función FLECHA → this = window (contexto donde se definió)
humano2.accion()	"Laura"	accion es normal → this = humano2 La flecha interna HEREDA ese this

Regla visual:

text

Función NORMAL  → this = quien está a la izquierda del . 
Función FLECHA  → this = quien estaba a la izquierda del . cuando se CREÓ

humano.normal()  → normal ve a humano → "Pedro" ✅
humano.flecha()  → flecha se creó en global → window.nombre → undefined ❌
humano2.accion() → flecha se creó dentro de accion → hereda humano2 → "Laura