Comment préserver le contexte dans les rappels « setTimeout » de JavaScript ?

Préserver le contexte lors de l'utilisation des rappels setTimeout

Lors de l'utilisation de setTimeout en JavaScript, transmettre le contexte approprié à sa fonction de rappel peut être crucial. Par exemple, supposons que vous souhaitiez appeler la méthode this.tip.destroy() après 1 000 millisecondes, à condition que this.options.destroyOnHide soit vrai. Cependant, l'utilisation de cette méthode entraîne une référence à l'objet fenêtre global.

Solutions pour préserver le contexte

Tout au long de l'évolution de JavaScript, diverses approches ont émergé pour résoudre ce contexte. problème :

• Contexte de liaison (ES5) : La méthode bind(), introduite dans ES5, vous permet de créer une nouvelle fonction avec une valeur this prédéfinie, empêchant le global this de s'infiltrer :

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

  Copier après la connexion

• Fonctions fléchées (ES6) : Les fonctions fléchées ont simplifié ce processus en éliminant le concept de leur propre valeur. Lors de l'accès à ceci dans une fonction fléchée, il hérite de la valeur this de sa portée environnante :

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

  Copier après la connexion

• Passage du contexte en tant qu'argument (HTML5) : HTML5 introduit une approche standardisée qui implique de transmettre le contexte comme argument au rappel function :

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

  Copier après la connexion

En employant l'une de ces techniques, vous pouvez efficacement conserver le contexte souhaité lors de l'utilisation des rappels setTimeout, garantissant ainsi que votre code se comporte comme prévu.

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!