Comment préserver le contexte dans les fonctions prototypes JavaScript ?

Préservation du contexte dans les fonctions de prototype JavaScript : un guide complet

De nombreux développeurs JavaScript rencontrent des difficultés lorsqu'ils tentent de préserver le contexte (la valeur de "ce ") dans les fonctions prototypes. Ce guide vise à fournir une compréhension complète de la façon de résoudre efficacement ce problème.

Dans l'exemple fourni :

MyClass = function() {
  this.element = $('#element');
  this.myValue = 'something';

  // some more code
}

MyClass.prototype.myfunc = function() {
  // at this point, "this" refers to the instance of MyClass

  this.element.click(function() {
    // at this point, "this" refers to the DOM element
    // but what if I want to access the original "this.myValue"?
  });
}

new MyClass();

Le problème survient lorsqu'un gestionnaire d'événements est défini dans la fonction prototype " mon fonctionnement." Lors de l'événement click, "this" ne fait plus référence à l'instance MyClass mais à l'élément DOM.

Préserver le contexte avec Bind

La méthode "bind" propose un solution simple. Il crée une nouvelle fonction qui conserve le contexte (cette valeur) de la fonction d'origine, même lorsqu'elle est invoquée dans un contexte différent.

En utilisant bind dans l'exemple :

MyClass.prototype.myfunc = function() {

  this.element.click((function() {
    // ...
  }).bind(this));
};

Le clic Le gestionnaire d'événements conserve le contexte de l'instance MyClass, permettant l'accès à "this.myValue".

Exemples de liaison supplémentaires

var obj = {
  test: 'obj test',
  fx: function() {
    alert(this.test + '\n' + Array.prototype.slice.call(arguments).join());
  }
};

var test = "Global test";
var fx1 = obj.fx;
var fx2 = obj.fx.bind(obj, 1, 2, 3);

fx1(1,2);
fx2(4, 5);

Dans cet exemple :

• fx1 est invoqué directement, ce qui donne un contexte global (« test global ») pour « ceci ».
• fx2 est une fonction liée qui préserve le contexte d'obj et transmet correctement les arguments.

Considérations sur la personnalisation

Si plusieurs fonctions prototypes nécessitent une préservation du contexte, la création d'une fonction de liaison personnalisée peut être nécessaire. Vous pouvez créer une version contextuelle de bind pour votre MyClass :

MyClass.prototype.myBind = function(func) {
  var context = this;
  return function() {
    func.apply(context, arguments);
  };
};

Cette méthode de liaison personnalisée peut ensuite être utilisée dans les fonctions prototypes :

MyClass.prototype.myfunc = function() {

  this.element.click(this.myBind(function() {
    // ...
  }));
};

Conclusion

La préservation du contexte dans les fonctions prototypes JavaScript est cruciale pour maintenir une fonctionnalité appropriée et éviter un comportement inattendu. La méthode « bind » fournit une solution efficace et intuitive, mais une personnalisation peut être nécessaire dans des scénarios plus complexes. En comprenant ces techniques, vous pouvez utiliser en toute confiance les fonctions du prototype sans compromettre la préservation du 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!