Las arrow functions conservan el puntero

las arrow functions conservan el puntero. No es por cuándo se ejecutan, sino por CÓMO se definen.

Tu confusión (muy común):

Crees que el orden de ejecución afecta al this. Dices: "la otra función ejecuta la función flecha antes de seguir"

Esto NO es correcto. El momento de ejecución NO afecta al this. Lo que afecta es dónde y cómo se creó la función.

La verdad: La diferencia está en la CREACIÓN, no en la EJECUCIÓN

Función normal: Crea su propio `this` en el momento de CREACIÓN

// En el momento de CREAR esta función, JavaScript prepara un nuevo 'this'
function funcionNormal() {
    console.log(this); // Este 'this' será DIFERENTE según cómo se llame
}

Arrow function: NO crea su propio `this` en el momento de CREACIÓN

// En el momento de CREAR esta función, JavaScript CAPTURA el 'this' de AFUERA
const arrowFunc = () => {
    console.log(this); // Este 'this' es el MISMO que había cuando se CREÓ
};

Analogía de la fotografía

Imagina que cada función es una fotografía (un recuerdo de cómo era el mundo cuando se creó).

Función normal:

Tomas una foto de TI MISMO (creas tu propio this)
La foto no muestra el entorno, solo a ti
Cuando la miras después, solo te ves a ti

Arrow function:

Tomas una foto del LUGAR DONDE ESTÁS (capturas el this exterior)
La foto muestra todo el entorno
Cuando la miras después, ves TODO lo que había cuando la tomaste

Ejemplo concreto para entender la CREACIÓN vs EJECUCIÓN

let contextoExterior = "Soy el exterior";

const objeto = {
    nombre: "Objeto 1",
    
    crearFunciones: function() {
        // 'this' aquí apunta a 'objeto'
        
        // CREAMOS las funciones (no las ejecutamos)
        const normal = function() {
            console.log("Normal:", this?.nombre);
        };
        
        const flecha = () => {
            console.log("Flecha:", this.nombre);
        };
        
        // LAS DEVOLVEMOS sin ejecutar
        return { normal, flecha };
    }
};

const otroObjeto = {
    nombre: "Objeto 2"
};

// CREAMOS las funciones dentro de 'objeto'
const funciones = objeto.crearFunciones();

// AHORA las EJECUTAMOS desde DIFERENTE contexto
funciones.normal.call(otroObjeto); // Normal: Objeto 2 (cambió el 'this')
funciones.flecha.call(otroObjeto);  // Flecha: Objeto 1 (NO cambió, mantuvo el original)

console.log("--- Mismo ejemplo pero ejecutando inmediatamente ---");

// CREAMOS Y EJECUTAMOS inmediatamente
objeto.crearFunciones = function() {
    const normal = function() {
        console.log("Normal ejecutada ya:", this?.nombre);
    };
    const flecha = () => {
        console.log("Flecha ejecutada ya:", this.nombre);
    };
    
    normal();  // Ejecutamos ahora
    flecha();  // Ejecutamos ahora
};

objeto.crearFunciones(); 
// Normal ejecutada ya: Objeto 1 (porque 'this' es 'objeto' al ejecutar)
// Flecha ejecutada ya: Objeto 1 (idéntico resultado)

¿Ves? El orden de ejecución NO importa

En el último ejemplo, ambas se ejecutaron inmediatamente y dieron el mismo resultado. La diferencia se ve cuando cambias el contexto de ejecución (usando .call() o pasándola como callback).

El momento CLAVE que determina el `this`:

Para función normal:

function normal() {
    console.log(this);
}

// El 'this' se determina en el momento de EJECUCIÓN:
normal();                       // this = undefined (o window)
objeto.normal();                // this = objeto
normal.call(otroObjeto);        // this = otroObjeto
boton.addEventListener('click', normal); // this = botón (al hacer click)

Para arrow function:

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

// El 'this' se determina en el momento de CREACIÓN:
// (en este caso, donde está este código, this = window)

flecha();                       // this = window (capturado al crear)
objeto.flecha = flecha;
objeto.flecha();                // this = window (¡sigue siendo window!)
flecha.call(otroObjeto);        // this = window (ignora .call())
boton.addEventListener('click', flecha); // this = window (al hacer click)

Entonces, ¿por qué las arrow functions son buenas para callbacks?

NO porque se ejecuten antes o después, sino porque CAPTURAN el this del lugar donde fueron CREADAS (normalmente dentro de un método de objeto).

const reproductor = {
    cancion: 'Rock',
    
    iniciar: function() {
        // Aquí, 'this' = reproductor (en el momento de CREAR el callback)
        
        setTimeout(() => {
            // Esta arrow function se CREÓ aquí, dentro del método 'iniciar'
            // Por eso 'this' sigue siendo 'reproductor'
            console.log(this.cancion); // 'Rock'
        }, 1000);
        
        // La arrow function ya capturó 'this' en el momento de su creación
        // No importa cuándo se ejecute (ahora, en 1 segundo, o nunca)
    }
};

Tu frase corregida:

Dijiste: "el puntero no se pierde porque la otra función ejecuta la función tipo flecha antes de seguir"

Versión corregida:
"El puntero no se pierde porque la arrow function CAPTURA el this del lugar donde fue CREADA (escrita), no importa cuándo ni dónde se ejecute después."

La analogía final que lo aclara todo

Función normal: Es como una cámara que se configura al tomar la foto (ejecución). Cada vez que tomas una foto, la cámara usa la configuración del momento.

Arrow function: Es como una foto ya revelada que se creó en un momento específico (definición). No importa dónde la veas después, la imagen es siempre la misma.

// La arrow function es como una foto del 'this' en el momento de su creación
const fotoDelThis = () => {
    console.log(this); // Esta imagen NO cambia nunca
};

Conclusión para que lo recuerdes siempre:

	Función Normal	Arrow Function
¿Cuándo se determina `this`?	En la EJECUCIÓN	En la CREACIÓN
¿Puede cambiar el `this`?	Sí, según cómo se llame	No, es fijo para siempre
¿Para qué sirve?	Cuando quieres `this` dinámico	Cuando quieres `this` fijo

Las arrow functions NO son mágicas. Simplemente "toman una foto" del this en el momento de su creación y usan ESA foto siempre, sin importar cómo las ejecutes después.

Buscar este blog

SOTELO-javascript