Использование setTimeout и сохранение контекста с этим в JavaScript

При использовании функции setTimeout в JavaScript важно знать, как она обрабатывается контекст этого. Это становится особенно актуальным при вызове методов, определенных в другом контексте в обратном вызове таймаута.

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

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

Решение:

Чтобы сохранить предполагаемый контекст this в обратном вызове тайм-аута, вы можете использовать метод .bind(), чтобы явно установить привязку контекста. Добавляя .bind(this) в конец функции, передаваемой в 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.bind(this), 5000);
    //                                       ^^^^^^^^^^^ <- fix context
};

Добавив .bind(this), ключевое слово this в функции обратного вызова будет привязано к тестовому прототипу, что позволит правильно вызывать метод2 в контексте метода-прототипа даже после задержки setTimeout.