Cuando esto argumenta: comprender 'esto' en funciones de devolución de llamada

En JavaScript, el valor de esto en una llamada de función está determinado por el contexto en el que se ejecuta la función. Sin embargo, al pasar esto como argumento, las reglas pueden complicarse.

Específicamente, surge el siguiente escenario: cuando se pasa una función de devolución de llamada como argumento, ¿por qué no se establece en la función que llama? ¿la devolución de llamada?

Comprender la jerarquía de 'esto'

Para entender por qué esto está establecido donde está, debemos considerar la jerarquía de la función llamadas:

• obj.prepareRandomFunction() establece esto en obj (regla n.° 2 de la respuesta).
• randomFunction(this.sumData.bind(this)) pasa this.sumData .bind(this) como argumento (regla #1).
• Dentro de randomFunction, callback(data) establece esto en el objeto global (regla #1).

Sin embargo, antes de que randomFunction llame a la devolución de llamada, usa this.sumData.bind(this) para crear una nueva función (regla n.° 5). Esta nueva función llama a la función de devolución de llamada original, pero ahora con esto vinculado a obj (el argumento pasado para vincular).

Implicaciones para las funciones de devolución de llamada

Al pasar un método como devolución de llamada, es fundamental comprender que no se llamará como obj.method(). Esto significa que esto no tendrá el valor correcto dentro de la función de devolución de llamada. Para solucionar este problema, puede usar bind() para establecer el valor de this dentro de la devolución de llamada.

Otras notas útiles

• Regla n.° 6 en la respuesta describe cómo las funciones de flecha de ES6 mantienen el valor léxico actual de esto, incluso en funciones de devolución de llamada.
• .apply() y .call() se pueden usar para crear nuevas llamadas a funciones con valores específicos de this.
• bind() se puede utilizar para crear nuevas funciones que llamen a la función original con un valor personalizado de this.
• Comprender la naturaleza compleja de esto es esencial para una codificación JavaScript efectiva y para Dominar conceptos como devoluciones de llamadas.