Confused on scoping and this

Question

I received a code snipper from here: http://jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/:

 var CounterButton = function(el){
    this.$el = $(el);
    this.counter = 0;
    this.bindEvents();
    this.myVal = 1;
}

CounterButton.prototype.bindEvents = function(){
    this.$el.click(this.clicked);
};

CounterButton.prototype.clicked = function(){
    this.increase();
    this.showMessage();
};

I am trying to figure out this specific line: his.$el.click(this.clicked);. When you have this inside the click function does that refer to whats being clicked on which would be this.$el?

Please read the entire article and you will see that he explains which is the correct approach. — Daniel Uzunu, Mar 23 '13 at 20:04

Royi Namir · Accepted Answer · 2013-03-23T19:42:26.890

does that refer to whats being clicked on which would be this.$el?

No. it is refering to a function named clicked which inside the object which holds the bindEvents method

However this in the event handler referes to the DOM ELEMENT ! consider this simple code :

$("body").click(this.do1);

function do1()
{
 alert(this.tagName); //BODY     
}

please notice that

$el.click(this.clicked)

is like :

var that=this;
$el.on('click',function {}(that.clicked()));

Spencer Lockhart · Answer 2 · 2013-03-23T19:39:34.280

this.$el refers to: $(el); (var CounterButton = function(el){...)

this.clicked refers to: CounterButton.prototype.clicked = function(){...

In jQuery, $(el).click is a function that can either trigger or listen for a click. If passed a function, it will listen for a click in the element 'el', and execute that function when one is performed.

Inside of the function 'this.clicked' though, something confusing happens.. jQuery passes the element that was clicked to the function 'this.clicked', so 'this' is 'el' from the constructor.

CounterButton.prototype.clicked = function(){
    this.increase(); // this refers to the element 'el'
    this.showMessage(); // this refers to the element 'el'
};

Which is why he gets this error: http://jsdude.wordpress.com/2012/12/19/jquery-event-callbacks-and-javascript-oop-methods/console/

You can fix that by doing closure:

CounterButton.prototype.clicked = function(){
    var self = this;
    return function () {
        self.increase(); // self refers to CounterButton
        self.showMessage(); // self refers to CounterButton
};

And instead of passing this.clicked, pass this.clicked()

 this.$el.click(this.clicked());

quietmint · Answer 3 · 2013-03-23T19:50:08.883

To answer the original question about this inside of a jQuery event handler: No, it is not necessarily the element that was clicked. Specifically, per http://api.jquery.com/on/:

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.) To create a jQuery object from the element so that it can be used with jQuery methods, use $(this).

score 0 · Answer 4 · edited May 23 '17 at 11:49

In jQuery this always refers to the DOM element on which the event handle was bound (http://api.jquery.com/bind/).

For a better understanding of this in general you can take a look here: How does the "this" keyword work?

If you read the whole post you will see why this example is wrong (the following text is from the article you linked to):

The clicked() method was called with wrong context. If you never heard about function call context in javascript, you should read this great article. By default, the context object for event callback in jQuery is the target HTML element. But that’s easy to fix, we just need to slightly modify the bindEvents() method:

CounterButton.prototype.bindEvents = function(){
    this.$el.click($.proxy(this.clicked, this));
};

$.proxy is jQuery’s version of function (or scope) binding. This method returns new function, which will always be called with context object, provided as second argument. You can read more in the official jQuery documentation.

score 0 · Answer 5 · answered Mar 23 '13 at 20:00

Some people are mixing up things. this from your example has nothing to do with behavior of this inside of jQuery functions.

Usage of code example is following:

var myButton = new CounterButton(domElement);

Every this, since it's constructor will be: this == myButton

Confused on scoping and this

5 Answers5