Application d'OOP avec jQuery

Je travaille avec jQuery et j'essaie d'appliquer certains principes basiques de Javascript OOP à un ensemble de fonctions qui contrôlent le comportement de survoltage. Cependant, je ne peux pas comprendre comment obtenir le mot-clé "this" pour désigner l'instance de l'objet que je crée. Mon exemple de code est:

var zoomin = new Object(); zoomin = function() { // Constructor goes here }; zoomin.prototype = { hoverOn: function() { this.hoverReset(); // More logic here using jQuery's $(this)... }, hoverReset: function() { // Some logic here. } }; // Create new instance of zoomin and apply event handler to matching classes. var my_zoomin = new zoomin(); $(".some_class").hover(my_zoomin.hoverOn, function() { return null; }); 

La ligne problématique du code ci-dessus est l'appel à "this.hoverReset ()" dans la fonction hoverOn (). Puisque "this" fait maintenant référence à l'élément qui a survolé, il ne fonctionne pas comme prévu. Je voudrais essentiellement appeler la fonction hoverReset () pour cette instance de l'objet (my_zoomin).

Est-ce qu'il y a un moyen de faire ça?

Merci!

L'affectation d'une fonction uniquement à une propriété d'un objet ne l'associe pas à l'intérieur de la fonction avec l'objet. C'est la façon dont vous appelez la fonction.

En appelant

 .hover(my_zoomin.hoverOn,...) 

Vous ne faites que passer la fonction. Il ne se souviendra pas de l'objet auquel il appartenait. Ce que vous pouvez faire, c'est passer une fonction anonyme et appeler hoverOn intérieur:

 .hover(function(){ my_zoomin.hoverOn(); },...) 

Cela fera en sorte que this hoverOn à l' my_zoomin . Donc, l'appel à this.hoverReset() fonctionnera. Cependant, à l'intérieur de hoverOn , vous n'aurez pas de référence à l'objet jQuery créé par le sélecteur.

Une solution serait de passer les éléments sélectionnés en tant que paramètre:

 var zoomin = function() { // Constructor goes here }; zoomin.prototype = { hoverOn: function($ele) { this.hoverReset($ele); // More logic here using jQuery's $ele... }, hoverReset: function($ele) { // Some logic here. } }; var my_zoomin = new zoomin(); $(".some_class").hover(function() { my_zoomin.hoverOn($(this)); // pass $(this) to the method }, function() { return null; }); 

À l'étape suivante, vous pourriez envisager de créer un plugin jQuery .

  1. Vous pouvez "lier" le gestionnaire d'événements à l'objet ( voir le code de liaison de Mootools par exemple).
  2. Vous pouvez passer l'objet en tant que paramètre dans la fonction anonyme et l'utiliser au lieu de this dans le gestionnaire d'événements

En ce qui concerne 1, vous ajoutez la méthode bind pour function

 bind: function(bind){ var self = this, args = (arguments.length > 1) ? Array.slice(arguments, 1) : null; return function(){ if (!args && !arguments.length) return self.call(bind); if (args && arguments.length) return self.apply(bind, args.concat(Array.from(arguments))); return self.apply(bind, args || arguments); }; } 

Je ne sais pas très bien comment il interagira avec les éléments de JQ.

Voir mes réponses à ces questions:

Où est-ce mon "ceci"?

Pourquoi est-ce "ceci" pas ceci ?

this confusion survient tout le temps.

Lorsque vous passez une fonction en rappel, elle est appelée comme une fonction autonome, ce qui signifie "ceci" devient l'objet global.

"Bind" est une partie native de ecmascript 5 et fait partie du prototype de fonction. Si vous parvenez à la fin de ma deuxième réponse, vous obtenez un lien vers le site Mozilla, qui a une version "compatibilité" de la fonction bind. Utilisez utiliser myfunction.bind (myobject), et il utilisera la fonction native si elle est disponible, ou la fonction JS si elle ne l'est pas.