JavaScript "this" mistério do ponteiro em funções aninhadas

Em um trecho de código JavaScript, você encontrou um comportamento inesperado em relação ao "this "ponteiro dentro de uma função aninhada. Apesar de definir a função aninhada dentro de um método de objeto, o ponteiro "este" dentro da função aninhada aponta para o objeto "janela" global.

O comportamento do ponteiro "este" é determinado pelo método de invocação de função em JavaScript. Existem três métodos principais:

1. Invocação direta: someThing.someFunction(arg1, arg2, argN)

   • Neste método, o ponteiro "this" refere-se ao objeto que invoca a função, neste caso, someThing.

2. Chamada de função com call(): someFunction.call(someThing, arg1, arg2, argN)

   • A função call() define explicitamente o ponteiro "this" para o objeto fornecido, neste caso, someThing.

3. Chamada de função com apply() : someFunction.apply(someThing, [arg1, arg2, argN])

   • Semelhante a call(), a função apply() define o ponteiro "this" para o objeto fornecido, mas leva um em vez disso, uma matriz de argumentos.

No exemplo que você forneceu, a função aninhada é invocada sem nenhum dos métodos explícitos de invocação de função. Como resultado, o ponteiro "este" é padronizado para o objeto global, que normalmente é o objeto "janela" em um ambiente de navegador.

Para especificar explicitamente o comportamento do ponteiro "este", você pode usar as seguintes modificações :

1. Use std_obj.displayMe() em vez de std_obj.displayMe; para chamar o método displayMe explicitamente.
2. Defina explicitamente a função aninhada com o ponteiro this do objeto: var doSomeEffects = function() { var that = this; ... }
3. Use as funções call() ou apply() para definir o ponteiro "this": doSomeEffects.call(std_obj);

Utilizando qualquer um desses métodos , você pode controlar o comportamento do ponteiro "this" dentro de funções aninhadas e garantir que ele se refira ao objeto desejado.