Comment garantir la portée correcte des méthodes d'instance dans les gestionnaires d'événements en JavaScript ?

Garantir la portée appropriée des méthodes d'instance dans les gestionnaires d'événements : bonnes pratiques

Dans JavaScript, l'utilisation de méthodes d'instance comme rappels pour les gestionnaires d'événements présente un défi de portée. La variable this peut passer de la représentation de l'instance d'objet à l'élément déclenchant le rappel. Pour résoudre ce problème, les développeurs emploient souvent l'approche suivante :

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this;
  $('#foobar').bind('click', function() {
    self.doSomething();
    // this.doSomething() would not work here
  })
}

Pendant son fonctionnement, des problèmes peuvent surgir concernant sa lisibilité et son efficacité. Il existe une solution plus élégante qui exploite le concept de fermetures.

Fermetures et « canalisation » de variables

Les fermetures permettent aux fonctions intégrées d'accéder aux variables définies dans leur portée parent, les « canalisant » efficacement. Par exemple, considérons l'exemple suivant :

var abc = 1; // we want to use this variable in embedded functions

function xyz() {
  console.log(abc); // it is available here!
  function qwe() {
    console.log(abc); // it is available here too!
  }
  ...
}

Cependant, cette technique est inefficace pour la variable this car elle peut changer dynamiquement de portée :

// we want to use "this" variable in embedded functions

function xyz() {
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe() {
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
}

Attribuer un alias à ceci

La solution consiste à lui attribuer un alias, en préservant sa valeur dans les fonctions intégrées.

var abc = this; // we want to use this variable in embedded functions

function xyz() {
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe() {
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
}

L'emploi de cette technique garantit une portée et une clarté appropriées au sein des gestionnaires d'événements, offrant une approche plus robuste et maintenable.

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!