Maison > interface Web > js tutoriel > le corps du texte

Comment conserver « cette » portée lors de l'utilisation de méthodes d'instance comme rappels en JavaScript ?

Mary-Kate Olsen
Libérer: 2024-11-06 19:54:03
original
844 Les gens l'ont consulté

How to Preserve `this` Scope When Using Instance Methods as Callbacks in JavaScript?

ce énigme dans les rappels JavaScript

Lors de l'attribution de méthodes d'instance en tant que gestionnaires d'événements, la portée de ce passe du instance d'objet à l'appelant d'événement. Cela peut présenter un problème et nécessite l'utilisation d'une solution de contournement comme celle-ci :

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

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

Bien que fonctionnelle, cette approche peut sembler délicate. Existe-t-il un meilleur moyen ?

Comprendre la fermeture

Le problème sous-jacent va au-delà de jQuery, enraciné dans le comportement des fermetures en JavaScript. Les fermetures permettent aux fonctions internes d'accéder aux variables déclarées dans leurs portées externes. Cependant, this est une variable spéciale qui peut changer dynamiquement sa portée.

Pour canaliser this dans des fonctions intégrées, on peut l'attribuer à un alias, tel que abc :

var abc = this;

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!
  }
  ...
};
Copier après la connexion

Cela permet à abc de conserver la référence d'objet correcte même dans les fonctions intégrées.

Conclusion

Aliasing this permet une utilisation efficace des méthodes d'instance comme rappels sans compromettre la portée. Cette technique s'applique non seulement à ceci mais aussi à d'autres pseudo variables comme 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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal