Comment préserver la portée de l'instance dans les gestionnaires d'événements JavaScript : capturer « ce » avec un alias de variable ?

Portée variable dans les gestionnaires d'événements : l'énigme du "ceci"

En JavaScript, les méthodes d'instance utilisées comme rappels de gestionnaire d'événements peuvent entraîner des problèmes de portée . Lorsque le gestionnaire d'événements est déclenché, la portée de « this » passe de l'instance prévue à l'élément qui a appelé le rappel. Cela nécessite l'utilisation d'une variable pour "capturer" et maintenir la portée de l'instance.

La technique consistant à déclarer une variable "self" pour alias "this" et la transmettre au gestionnaire d'événements, comme vu dans l'extrait de code est une solution courante. Cependant, son apparence non conventionnelle peut soulever des inquiétudes quant à son adéquation.

Alternatives à l'alias "self" :

Le problème principal n'est pas spécifique à jQuery mais concerne la fermeture de JavaScript. comportement. Alors que les fermetures permettent aux fonctions intégrées d'accéder aux variables depuis leur portée parent, cette pseudo-variable se comporte différemment. Comme le démontre le code :

// Attempt to use "this" in embedded functions
function xyz() {
  console.log(this); // Incorrect
}

Ce comportement nécessite une approche modifiée :

// Assign "this" to a variable (i.e., abc) and use the variable instead
var abc = this;

function xyz() {
  console.log(abc); // Correct
}

En alias "this" avec abc, l'accès de la fermeture à la portée de l'instance prévue est préservé. Cette technique est applicable à d'autres pseudo-variables, telles que les « arguments ».

Par conséquent, bien que la méthode d'alias "self" soit fonctionnelle, l'alternative consistant à attribuer et à référencer explicitement "this" à une variable offre une solution plus solution conventionnelle et robuste au problème de portée dans les fonctions de rappel du gestionnaire d'événements.

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!