Usando setTimeout e preservando o contexto com isso em JavaScript

Ao usar a função setTimeout em JavaScript, é essencial estar ciente de como ela lida o contexto disso. Isso se torna particularmente relevante ao chamar métodos definidos em um contexto diferente dentro do retorno de chamada de tempo limite.

No trecho de código fornecido, a função do método chama o método2, que recupera um elemento de imagem com base em um ID passado e define sua propriedade src . Inicialmente, o método2 é executado com sucesso. No entanto, após o atraso setTimeout, ocorre um erro porque a função method2 não está mais definida dentro do contexto pretendido.

O problema surge porque setTimeout cria um novo contexto de execução e a palavra-chave this é padronizada para o objeto global. No código fornecido, a função do método é invocada usando o contexto do protótipo de teste, mas quando o retorno de chamada de tempo limite é executado, o contexto this mudou para o objeto global.

Solução:

Para preservar o contexto pretendido dentro do retorno de chamada de tempo limite, você pode usar o método .bind() para definir explicitamente a ligação do contexto. Ao anexar .bind(this) ao final da função que está sendo passada para setTimeout, você pode garantir que this dentro da função de retorno de chamada se refira ao contexto pretendido.

No trecho de código atualizado:

test.prototype.method = function()
{
    //method2 returns image based on the id passed
    this.method2('useSomeElement').src = "http://www.some.url";
    timeDelay = window.setTimeout(this.method.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

Ao adicionar .bind(this), a palavra-chave this dentro da função de retorno de chamada será vinculada ao protótipo de teste, permitindo que o método2 seja chamado corretamente dentro do contexto do método do protótipo, mesmo após o atraso setTimeout.