Comment conserver « cette » référence dans les fonctions de prototype JavaScript ?

Préserver la référence "this" dans les fonctions de prototype JavaScript

Un défi courant lorsque l'on travaille avec des prototypes JavaScript consiste à préserver la référence "this" dans des fonctions. Cela devient particulièrement crucial lorsqu'il s'agit d'événements ou de rappels.

Préserver "this" avec "bind()":

La méthode JavaScript bind() nous permet de créer une nouvelle fonction qui préserve la référence "this" de la fonction d'origine. Cela peut être utilisé pour garantir que le mot-clé "this" à l'intérieur des fonctions imbriquées fait toujours référence à l'objet souhaité.

Dans l'exemple fourni :

MyClass.prototype.myfunc = function() {
  this.element.click(function() {
    // Use bind() to preserve "this"
    // ...
  }.bind(this));
};

Ici, nous utilisons bind() pour créez un nouveau gestionnaire d'événements de clic qui conserve la référence "this" de l'objet MyClass. Cela nous permet d'accéder aux propriétés MyClass, telles que "this.myValue", dans le gestionnaire d'événements.

Préserver "this" avec Closures :

Une autre approche pour préserver "ceci" consiste à utiliser des fermetures. Les fermetures sont des fonctions qui conservent l'accès aux variables de leur portée parent, même après la fin de l'exécution de la portée parent.

Dans l'exemple fourni, nous pourrions utiliser une fermeture pour conserver "this":

MyClass.prototype.doSomething = function() {
  var that = this; // Capture "this" in a closure

  this.elements.each(function() {
    // Use "that" to access the MyClass properties
    // ...
  });
};

Dans la fonction interne, nous pouvons accéder aux propriétés MyClass en faisant référence à « cela ».

Éviter les variables globales :

Il est généralement recommandé d'éviter d'utiliser variables globales pour préserver "cela" car cela peut conduire à des conflits et à une pollution de l'espace de noms global.

Solution propre et efficace :

L'utilisation de bind() ou de fermetures fournit des moyens propres et efficaces de préserver « ceci » dans les fonctions du prototype JavaScript sans violer les principes de conception ni introduire de complexité inutile.

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!