Comment puis-je accéder correctement à « ce » dans les rappels JavaScript ?

Cette affinité dans les rappels JavaScript

En JavaScript, l'utilisation de méthodes d'instance dans les rappels du gestionnaire d'événements peut modifier la portée de "this" par rapport à celle prévue instance à la source qui a invoqué le rappel. Par conséquent, un code similaire à l'exemple ci-dessous est souvent utilisé :

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

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

Bien que fonctionnelle, cette approche peut sembler étrange. Existe-t-il une solution plus optimale ?

Comprendre la fermeture et l'affinité de « ceci »

Ce problème transcende jQuery et découle de la gestion par JavaScript de « ceci » et des fermetures. Les fermetures permettent aux fonctions imbriquées d'accéder aux variables définies dans la fonction englobante, comme illustré ci-dessous :

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

"Ceci", cependant, se comporte différemment. Contrairement aux variables ordinaires qui restent constantes dans une portée spécifique, « ceci » peut varier dynamiquement d'une portée à l'autre.

// 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!
  }
  ...
};

Solution : alias « ceci »

Pour contourner cela défi, JavaScript nous permet d'attribuer « ceci » à une variable, essentiellement en l'aliasant. Cela nous permet de faire référence à l'objet souhaité tout au long des fonctions imbriqué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!
  }
  ...
};

Ce même principe s'applique à d'autres pseudo variables telles que les "arguments".

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!