Quando this argumenta: entendendo 'this' em funções de retorno de chamada

Em JavaScript, o valor this em uma chamada de função é determinado pelo contexto em que a função é executada. Ao passar isso como um argumento, no entanto, as regras podem ficar complicadas.

Especificamente, surge o seguinte cenário: quando uma função de retorno de chamada é passada como argumento, por que isso não é definido para a função que chama o retorno de chamada?

Compreendendo a hierarquia de 'this'

Para entender por que this está definido onde está, precisamos considerar a hierarquia de chamadas de função:

• obj.prepareRandomFunction() define isso como obj (regra nº 2 da resposta).
• randomFunction(this.sumData.bind(this)) passa isso. sumData.bind(this) como um argumento (regra #1).
• Dentro de randomFunction, callback(data) define this para o objeto global (regra #1).

No entanto, antes de randomFunction chamar o retorno de chamada, ele usa this.sumData.bind(this) para criar uma nova função (regra #5). Esta nova função chama a função de retorno de chamada original, mas agora com esta vinculada a obj (o argumento passado para vincular).

Implicações para funções de retorno de chamada

Ao passar um método como retorno de chamada, é crucial entender que não será chamado como obj.method(). Isso significa que não terá o valor correto dentro da função de retorno de chamada. Para contornar esse problema, você pode usar bind() para definir o valor this no retorno de chamada.

Outras notas úteis

• Regra nº 6 em a resposta descreve como as funções de seta ES6 mantêm o valor lexical atual disso, mesmo em funções de retorno de chamada.
• .apply() e .call() podem ser usados ​​para criar novas chamadas de função com valores específicos de this.
• bind() pode ser usado para criar novas funções que chamam a função original com um valor personalizado de this.
• Compreender a natureza complexa disso é essencial para uma codificação JavaScript eficaz e para dominar conceitos como retornos de chamada.