whatwg - setTimeout y "this" en JavaScript

whatwg español

Question

Tengo un método que usa la función setTimeout y realiza una llamada a otro método. En el método de carga inicial 2 funciona bien. Sin embargo, después del tiempo de espera, aparece un error que dice que el method2 no está definido. ¿Qué estoy haciendo mal aquí?

ex:

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, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i < document.images.length; i++) {
        if (document.images[i].id.indexOf(name) > 1) {
            return document.images[i];
        }
    }
};

Answer 1

Me sale un error que dice que method2 no está definido

Sí, cuando this.method de su propietario y pasas la función solo a setTimeout , pierdes la asociación que establece this , por lo que this en method() es igual a la window objeto global.

Consulte esta respuesta para obtener una explicación de la sorprendente manera en que this realmente funciona en JavaScript.

Answer 2

El problema es que setTimeout() hace que javascript use el alcance global. Básicamente, estás llamando a la clase method() , pero no a partir de this . En su lugar, solo le está diciendo a setTimeout que use el method función, sin un alcance particular.

Para solucionarlo, puede ajustar la llamada a la función en otra llamada de función que haga referencia a las variables correctas. Se verá algo como esto:

test.protoype.method = function()
{
    var that = this;

    //method2 returns image based on the id passed
    this.method2(''useSomeElement'').src = "http://www.some.url";

    var callMethod = function()
    {
        that.method();
    }

    timeDelay = window.setTimeout(callMethod, 5000);
};

that puede ser porque callMethod() encuentra dentro del alcance del método.

Este problema se vuelve más complejo cuando necesita pasar parámetros al método setTimeout , ya que IE no admite más de dos parámetros para setTimeout . En ese caso, deberás leer sobre closures .

Además, como nota al margen, te estás preparando para un ciclo infinito, ya que el method() siempre llama a method() .

Answer 3

Una opción más elegante es agregar .bind(this) al final de su función. P.ej:

    setTimeout(function() {
        this.foo();
    }.bind(this), 1000);
//   ^^^^^^^^^^^ <- fix context

Entonces, la respuesta a la pregunta del OP podría ser:

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

Answer 4

el this que setTimeOut en setTimeOut está setTimeOut por sí mismo. Crea una var "foo = this;" dentro de su función t est.prototype.method y use foo lugar.

Answer 5

en es6 puedes hacerlo así

window.setTimeout(() => {
    this.foo();
}, 1000);