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

Comment conserver la référence « ceci » dans les fonctions prototypes JavaScript

En JavaScript, conserver la référence à « ceci » dans les fonctions prototypes peut être difficile lorsque la portée change. Pour résoudre ce problème, envisagez les solutions suivantes :

Utilisation de la méthode Bind

La méthode bind vous permet de créer une nouvelle fonction qui préserve la référence 'this' à l'objet d'origine. Utilisation :

function.bind(object, argument1, argument2, ...);

Par exemple :

MyClass.prototype.myfunc = function() {
  this.element.click(this.myfunc.bind(this));
};

Cela garantit que « ceci » fait référence à l'instance MyClass lorsque l'événement de clic est déclenché.

Création d'une référence à « ceci »

Vous pouvez également créer une référence à « ceci » dans le prototype function :

MyClass.prototype.myfunc = function() {
  var myThis = this;
  ...
};

Cela vous permet d'accéder à « this.myValue » dans les fonctions imbriquées. Cependant, vous devrez peut-être créer ces références pour chaque fonction prototype, ce qui peut s'avérer fastidieux.

Utilisation des fonctions fléchées

Les fonctions fléchées héritent de la valeur 'this' du contexte environnant, ce qui peut simplifier le code :

MyClass.prototype.doSomething = () => {
  // operate on the element
};

Éviter Global Variables

Évitez d'utiliser des variables globales pour contenir la référence 'this', car cela pollue l'espace de noms global et peut entraîner des conflits lorsque plusieurs objets MyClass existent.

Exemple avec jQuery Each

Pour travailler avec la méthode each de jQuery, vous pouvez utiliser la méthode bind pour conserver le 'this' référence :

MyClass.prototype.doSomething = function() {
  this.elements.each(this.doSomething.bind(this));
};

Conclusion

Bien que l'utilisation de modèles de prototypes soit généralement considérée comme une bonne pratique, comprendre comment maintenir la bonne référence « this » est essentiel pour préserver l'état de l'objet et le comportement. La méthode de liaison et d'autres techniques peuvent apporter des solutions efficaces à ce défi.

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!