How to get object reference inside jQuery callback function?

Question

Say we have a javascript object named aObject, and the test () function is used as a callback function in jQuery

var aObject = { aVariable : 'whatever value', test : function() { // Trying to access property. But doesn't work as expected since I am getting the DOM element, not the aObject reference var temp = this.aVariable; } } var anInstanceOfAObject = $.extend({}, aObject); anInstanceOfAObject.someFunction = function () { // I have to put "this" in a variable since "this" in the context below refers to the DOM element, not the instance of the object var placeHolder = this; $('some random div.element').theJavascriptFunction({ "theJavascriptCallbackFunction": placeHolder.test, }); } 

Inside this test () function, the "this" context is usually a DOM element. My question is how to reference the aObject object, since we cannot use "this" to refer to it.

EDIT: I'm not sure if the above syntax is the correct / preferred way to instantiate an object. I see some examples using this syntax

 var aObject = function() {.... 

Please let me know if this seems like a problem.

Answer 1

You just need to wrap the method call to get the correct this :

 anInstanceOfAObject.someFunction = function () { var placeHolder = this; $('some random div.element').theJavascriptFunction({ "theJavascriptCallbackFunction": function() { placeHolder.test() } }); } 

When you use only placeHolder.test as a callback, you simply pass a reference to the test function, and that function will be called with the DOM element like this .

You can also try bind :

 anInstanceOfAObject.someFunction = function () { var placeHolder = this; $('some random div.element').theJavascriptFunction({ "theJavascriptCallbackFunction": this.test.bind(this) }); } 

Answer 2

If you end the jquery function call with $ .proxy (function, this), then jquery will correct your link to this so that it works the way you want.

Firstly, your question is right. However, your code does not work, and when it is fixed, it illustrates the solution to the problem. Short lesson: you will learn more if you debug your problem code first!

---

Below I will pose a problem, a solution that you will illustrate, and a more elegant solution.

---

Here is the object in question:

 var aObject = { aVariable : 'whatever value', test : function() { // Trying to access property. //But doesn't work as expected since I am getting //the DOM element, not the aObject reference var temp = this.aVariable; alert("temp=" + temp); } } 

---

Here is an example of a problem:

 var anInstanceOfAObject = $.extend({}, aObject); anInstanceOfAObject.someFunction = function() { $(function() { //The problem. 'this' is not set after calling the fn via jquery. this.test(); }); anInstanceOfAObject.someFunction(); 

---

Here is your solution:

 var anInstanceOfAObject = $.extend({}, aObject); anInstanceOfAObject.someFunction = function() { // by saving this in placeHolder you solve the problem. Good! var placeHolder = this; $(function() { // Your solution works. Here you pass forward your ref to this placeHolder.test(); }); } anInstanceOfAObject.someFunction(); 

---

Finally, here is a slightly more elegant answer:

 var anInstanceOfAObject = $.extend({}, aObject); anInstanceOfAObject.someFunction = function() { $( $.proxy(function(){ // using $.proxy gets jquery to fix your this ref this.test(); },this) ); } anInstanceOfAObject.someFunction(); 

Answer 3

this always applies to the dom element. to get the jQuery object associated with the element you need to paste it into jquery again, so either $ (this) or jQuery (this) depending on your installation.