How to use this in prototype function with jQuery?

Question

I am trying to migrate some JavaScript functionality to OOP JavaScript like this:

function Test(parameters) {

    this.containerID = parameters['containerID'];
    ....
    this.navNext = $('#' + this.containerID + ' #test');
    ...
}

Test.prototype = {
    constructor: Test,
    ...
    init: function () {
        ...
        this.navNext.on('click', function (event) {
            ...
            this.showNext(); //here is the issue
        });
       ...
    },
    showNext: function () {
        ...
    }  
};

Then I am instantiating new instance like follows:

test = new Test({'containerID':'test_id'});
test.init();

But when I click on the "next button" or ($('#test_id '#test' element) I am getting the following error:

Uncaught ReferenceError: showNext is not defined

I guess in the on jQuery function this.showNext() is pointing to selected element showNext() function, not my prototype function.

Could anyone give me an advice how to fix this behavior?

gotqn · Accepted Answer · 2014-04-07 20:55:35Z

2

Inside an event handler,this refers to the element that received the event. You can instead make an outer reference to the desired this.

var that = this;

this.navNext.on('click', function (event) {
    ...
    that.showNext();
});

Or use Function.prototype.bind(), which can be shimmed in older browsers.

this.navNext.on('click', function (event) {
    ...
    this.showNext();
}.bind(this));

Or $proxy.

this.navNext.on('click', $.proxy(function (event) {
    ...
    this.showNext();
}, this));

Or pass the object as event data.

this.navNext.on('click', this, function (event) {
    ...
    event.data.showNext();
});

Note that in the versions that alter this, you can still get a reference to the element via event.currentTarget. Or just use the event.data version, and this will still be the element.

edited Apr 7, 2014 at 20:55

gotqn

44k47 gold badges167 silver badges257 bronze badges

answered Apr 7, 2014 at 20:27

cookie monster

11k4 gold badges33 silver badges45 bronze badges

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

Comments

epascarello · Accepted Answer · 2014-04-07 20:26:56Z

1

Look at what this is

this.navNext.on('click', function (event) {
    console.log(this);
    this.showNext(); //here is the issue
});

When you look at it in the log, you will see that "this" is the element you clicked on.

The scope is wrong, but you can fix it with jQuery's proxy()

this.navNext.on('click', $.proxy(this.showNext,this));

or you can use Function.prototype.bind()

this.navNext.on('click', this.showNext.bind(this));

answered Apr 7, 2014 at 20:26

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Mike Dinescu · Accepted Answer · 2014-04-07 20:27:10Z

1

You could just save a reference to the object in the on('click' handler:

   var thisRef = this;
    this.navNext.on('click', function (event) {
        ...
        thisRef.showNext(); //here is the issue
    });

answered Apr 7, 2014 at 20:27

Mike Dinescu

56k17 gold badges124 silver badges153 bronze badges

Collectives™ on Stack Overflow

How to use this in prototype function with jQuery?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related