setTimeout и неуловимое «это» в JavaScript

При использовании функции setTimeout разработчики часто сталкиваются с проблемой, когда последующие вызовы методов теряют значение их предполагаемый контекст, что приводит к появлению, казалось бы, неопределенных методов. Обычно это вызвано потерей ссылки this.

Проблема:

Рассмотрите следующий код:

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  1) {
            return document.images[i];
        }
    }
};

При начальной загрузке страницы функция метода2 работает должным образом. Однако после установки таймаута последующие вызовы метода2 приводят к ошибке, указывающей на то, что он не определен.

Решение:

Основная проблема заключается в способе обработки setTimeout это ключевое слово. При установке тайм-аута с помощью setTimeout(this.method, 5000) контекст теряется, что приводит к ошибке.

Умное решение этой проблемы — использовать метод связывания(). Добавляя «.bind(this)» в конец вызова метода, можно явно привязать контекст, гарантируя, что правильная ссылка «this» сохранится даже после таймаута.

Улучшенный код :

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

Благодаря этой модификации контекст «this» правильно привязан, что позволяет методу 2 продолжать работать так, как задумано, после истечения тайм-аута. Этот подход одновременно элегантен и эффективен для сохранения правильного контекста выполнения.