Using OOP with jQuery

Question

I work with jQuery and try to apply some basic principles of OOP Javascript to a set of functions that control behavior. However, I cannot figure out how to get the keyword "this" to refer to an instance of the object that I am creating. My sample code is:

var zoomin = new Object(); zoomin = function() { // Constructor goes here }; zoomin.prototype = { hoverOn: function() { this.hoverReset(); // More logic here using jQuery $(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; }); 

The problematic line in the above code is a call to the this.hoverReset () function inside the hoverOn () function. Since "this" now refers to the element that was hovering, it does not work as intended. I would basically like to call the hoverReset () function for this instance of the object (my_zoomin).

Is there any way to do this?

Thanks!

Answer 1

Assigning a function to an object only is not related to this inside a function with an object. So you call the function.

Causing

 .hover(my_zoomin.hoverOn,...) 

you pass the function only. He will not “remember” to which object he belonged. What you can do is pass an anonymous function and call hoverOn inside:

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

This will make this inside hoverOn reference to my_zoomin . So calling this.hoverReset() will work. However, inside hoverOn you will not have a reference to the jQuery object created by the selector.

One solution would be to pass the selected items as a parameter:

 var zoomin = function() { // Constructor goes here }; zoomin.prototype = { hoverOn: function($ele) { this.hoverReset($ele); // More logic here using jQuery $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; }); 

---

As a next step, you might consider creating a jQuery plugin .

Answer 2

• You can "bind" an event handler to an object ( see, for example, the Mootools binding code ).
• You can pass an object as a parameter in an anonymous function and use it instead of this in an event handler

As for 1, you add the bind method to 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); }; } 

Not sure how well it will interact with JQ material.

Answer 3

see my answers to these questions:

where is my "this"?

why is this not this?

this gets confused all the time.

when you pass a function as a callback, it is called as a separate function, so its "this" becomes a global object.

"bind" is a native part of ecmascript 5 and is part of the function prototype. If you go to the end of my second answer, you will get a link to the mozilla website, which has a compatibility function for the binding function. Use myfunction.bind (myobject) and it will use the built-in function if available, or the JS function if it is not.