La aplicación de programación orientada a objetos con jQuery

Question

estoy trabajando con jQuery y tratar de aplicar algunos principios básicos Javascript programación orientada a objetos a un conjunto de funciones que controlan el comportamiento estacionario. Sin embargo, no puedo entender cómo hacer que la palabra clave "this" se refiera a la instancia del objeto que estoy creando. Mi código de ejemplo es:

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 línea problemática en el código anterior es la función de "this.hoverReset()" dentro de la hoverOn() llamada. Como "esto" ahora se refiere al elemento sobre el que se colocó, no funciona según lo previsto. Básicamente me gustaría llamar a la función hoverReset() para esa instancia del objeto (my_zoomin).

¿Hay alguna manera de hacer esto?

Gracias!

Answer 1

Sólo la asignación de una función a una propiedad de un objeto no relacionado this dentro de la función con el objeto. Es la forma en que llamas a la función.

Llamando

.hover(my_zoomin.hoverOn,...) 

que solo salen de la función. No "recordará" a qué objeto pertenecía. Lo que puede hacer es pasar una función anónima y llame hoverOn interior:

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

Esto hará que el this dentro hoverOn se refiere a my_zoomin. Entonces la llamada al this.hoverReset() funcionará. Sin embargo, en el interior hoverOn, se no tener una referencia al objeto jQuery creado por el selector.

Una solución sería aprobado los elementos seleccionados como parámetro:

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; 
}); 

---

Como siguiente paso, se podría considerar la posibilidad de un jQuery plugin.

Answer 2

1. Se puede "atar" el controlador de eventos al objeto (see Mootools bind code por ejemplo).
2. Puede pasar el objeto como un parámetro en la función anónima y el uso que en lugar de this en el controlador de eventos

En cuanto a 1, se agrega el método bind a 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); 
     }; 
    } 

No

sin embargo, lo bien que interactuará con las cosas de JQ.

Answer 3

por favor ver mis respuestas a estas preguntas:

where is my "this"?

why is "this" not this?

this confusión viene todo el tiempo.

cuando pasa una función como devolución de llamada, se invoca como una función independiente, por lo que "this" se convierte en el objeto global.

"bind" es una parte nativa de ecmascript 5, y es parte del prototipo de la función. Si vas hasta el final de mi segunda respuesta, obtienes un enlace al sitio web de mozilla, que tiene una versión de "compatibilidad" de la función de enlace. Use myfunction.bind (myobject), y usará la función nativa si está disponible, o la función JS si no lo está.