Question

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 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.

Answer 1

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