Usar setTimeout y preservar el contexto con esto en JavaScript

Al usar la función setTimeout en JavaScript, es esencial tener en cuenta cómo se maneja el contexto de esto. Esto se vuelve particularmente relevante cuando se llama a métodos definidos en un contexto diferente dentro de la devolución de llamada de tiempo de espera.

En el fragmento de código proporcionado, la función del método llama al método2, que recupera un elemento de imagen basado en una ID pasada y establece su propiedad src. . Inicialmente, el método2 se ejecuta correctamente. Sin embargo, después del retraso de setTimeout, se produce un error porque la función método2 ya no está definida dentro del contexto previsto.

El problema surge porque setTimeout crea un nuevo contexto de ejecución y la palabra clave this tiene como valor predeterminado el objeto global. En el código proporcionado, la función del método se invoca utilizando el contexto del prototipo de prueba, pero cuando se ejecuta la devolución de llamada de tiempo de espera, este contexto ha cambiado al objeto global.

Solución:

Para preservar el contexto previsto de esto dentro de la devolución de llamada de tiempo de espera, puede usar el método .bind() para establecer explícitamente el enlace del contexto. Al agregar .bind(this) al final de la función que se pasa a setTimeout, puede asegurarse de que esto dentro de la función de devolución de llamada se refiera al contexto deseado.

En el fragmento de código actualizado:

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
};

Al agregar .bind(this), la palabra clave this dentro de la función de devolución de llamada se vinculará al prototipo de prueba, lo que permitirá llamar correctamente al método2 dentro del contexto del método prototipo incluso después del retraso setTimeout.