Gestion de la référence « cette » dans les méthodes prototypes avec setInterval et setTimeout : quelles sont les solutions ?

Gestion de cette référence dans les méthodes prototypes avec setInterval et setTimeout

En JavaScript, une méthode prototype perd son association this lorsqu'elle est extraite et transmise ailleurs. Considérez le code suivant :

function Foo() {}
Foo.prototype = {
  bar: function () {
    this.baz();
  },
  baz: function () {
    this.draw();
    requestAnimFrame(this.baz);
  }
};

Ce code échoue avec une erreur car il n'est pas correctement lié à l'intérieur des rappels setInterval ou setTimeout.

Solutions :

Il existe plusieurs façons de gérer ce problème :

Appel de méthode Wrap dans une fonction anonyme :

var that = this;
setInterval(function () {
  return that.baz();
}, 1000);

Cela préserve le this de la fonction externe à l'aide d'un variable d'assistance.

Appel de méthode Wrap dans la fonction Fat Arrow :

setInterval(() => this.baz(), 1000);

Les fonctions anonymes de grosse flèche maintiennent le this à partir de la fonction environnante.

Utiliser une fonction de liaison :

setInterval(this.baz.bind(this), 1000);

// dojo toolkit example:
setInterval(dojo.hitch(this, 'baz'), 10);

Des fonctions de liaison telles que Function.prototype.bind ou des équivalents de bibliothèque vous permettent de lier explicitement ce contexte.

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!