Comment préserver le contexte de « ceci » en JavaScript lors de l'utilisation de setTimeout de manière asynchrone ?

setTimeout et l'insaisissable "this" en JavaScript

Lors de l'utilisation de la fonction setTimeout en JavaScript, un problème courant rencontré est le comportement inattendu de le mot-clé "ceci". Cela se produit lorsqu'une méthode contenant un appel setTimeout fait référence à une autre méthode, mais qu'après le délai d'attente, la méthode référencée devient indéfinie.

Ce problème provient du fonctionnement de setTimeout. Lorsqu'une fonction est passée en argument à setTimeout, le contexte de "this" dans cette fonction est perdu. En effet, setTimeout exécute la fonction de manière asynchrone et, à ce moment-là, le contexte d'origine de « ceci » risque de ne plus être accessible.

Pour résoudre ce problème, il existe deux solutions courantes :

1. Utilisation de la méthode bind()

La méthode bind() peut être utilisée pour préserver le contexte de "this" dans la fonction passée à setTimeout. En ajoutant ".bind(this)" à la fin de la fonction, le contexte est explicitement préservé, comme le montre l'exemple suivant :

setTimeout(function() {
    this.foo();
}.bind(this), 1000);

2. Fonctions fléchées

Les fonctions fléchées lient automatiquement « ceci » au contexte environnant. Ainsi, aucune étape supplémentaire n'est requise pour maintenir le contexte correct dans la fonction de rappel transmise à setTimeout :

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

En appliquant ces techniques à l'extrait de code fourni, le problème peut être résolu en modifiant le code comme suit :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!