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

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.

yes. I want to get aObject, not the DOM element(much better if there is a way to get both). — developarvin
– developarvin, Commented Sep 5, 2011 at 6:22

mu is too short · Accepted Answer · 2011-09-05 06:25:03Z

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

answered Sep 5, 2011 at 6:25

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jalkin · Accepted Answer · 2013-06-04 18:44:16Z

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

longstaff · Accepted Answer · 2011-09-05 06:19:27Z

0

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.

answered Sep 5, 2011 at 6:19

longstaff

2,0511 gold badge12 silver badges15 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related