Comment maintenir le contexte « this » correct dans les rappels « setTimeout » ?

Assurer la correction de ce contexte dans les rappels setTimeout

Lors de l'utilisation de setTimeout pour planifier une fonction de rappel, il est crucial de s'assurer que la fonction conserve le contexte souhaité. Cependant, des problèmes surviennent lorsque this fait référence à l'objet global dans le rappel.

Dans l'exemple fourni :

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }, 1000);
}

this fait référence à la fenêtre globale, pas à l'objet prévu. Pour éviter cela, il existe plusieurs approches :

1. Stocker le contexte :

Enregistrer une référence au contexte actuel avant d'appeler setTimeout.

var that = this;
if (this.options.destroyOnHide) {
     setTimeout(function(){ that.tip.destroy() }, 1000);
}

2. Utiliser la méthode de liaison (ES5) :

Créez une nouvelle fonction liée au contexte correct à l'aide de bind.

if (this.options.destroyOnHide) {
     setTimeout(function() { this.tip.destroy() }.bind(this), 1000);
}

3. Utilisez les fonctions fléchées (ES6) :

Les fonctions fléchées héritent automatiquement de cette valeur de leur lexical scope.

if (this.options.destroyOnHide) {
     setTimeout(() => { this.tip.destroy() }, 1000);
}

4. Passer des arguments au rappel (HTML5) :

Les minuteries HTML5 permettent de transmettre des arguments au rappel.

if (this.options.destroyOnHide) {
     setTimeout(function(that){ that.tip.destroy() }, 1000, this);
}

N'oubliez pas que le contexte peut varier en fonction de la manière dont la fonction est invoquée. Pour garantir le comportement souhaité, envisagez l'approche appropriée en fonction des fonctionnalités linguistiques disponibles.

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!