How to get the object reference inside a JQuery callback function?

Let's say that we have a javascript object called 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开发者_C百科 below refers to the DOM element, not the instance of the object
    var placeHolder = this;
    $('some random div.element').theJavascriptFunction({
        "theJavascriptCallbackFunction": placeHolder.test,
    });
}

Inside that test() function, normally the context of "this" is the DOM element. My question is how to reference aObject since we can't use "this" to reference it.

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

var aObject = function() {....

Please inform me if this seems to be relevant to the problem.

You just need to wrap your method call to get the right this:

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

When you use just placeHolder.test as the callback, you're just handing over a reference to the test function and that function will be called with the DOM element as this.

You could also try bind:

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

If you wrap a jquery function call with $.proxy(function, this) then jquery will fix your reference to this so it works the way you want.

First, your question is right on. However your code doesn't work and when its fixed it illustrates a solution to the problem. A short lesson: you will learn more if you debug your problem code first!

Below I will supply the problem, the solution you 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 the 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 the solution you coded:

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

this always refers to the dom element. to get the jQuery object related to the element you need to wrap it in the jquery again, so either $(this) or jQuery(this) depending on your setup.