"this" in JavaScript objects vs. jQuery $(this)

Question

I've stumbled over a problem. I have an object method foo defined as:

var obj = {
    foo: function() {
        $('.personName').mouseover(function() {
            this.highlight($(this).attr('faceIndex'));
        });
    }
}

So what should happen is that whenever the mouse cursor is over an HTML object of type personName, the obj.highlight method should be called with the faceIndex value from the HTML object as an argument. However I apparently have a clash between two this's: the one of jQuery and the one of JavaScript (referencing to obj from inside obj).

What can (should) I do? Have I violated some good programming practice?

Answer 1

A typical pattern to work around this is to use a local variable to store the first this:

var obj = {
    foo: function() {
        var _this = this;
        $('.personName').mouseover(function() {
            _this.highlight($(this).attr('faceIndex'));
        });
    }
}

Using a language like TypeScript or an ES6 compiler makes it easier to use this pattern without having to write the _this by hand each time.

Answer 2

Short answer: do

    $('.personName').mouseover(function(event) {
        obj.highlight($(event.target).attr('faceIndex'));
    });

Longer explanation:

Javascript doesn't really have a concept of this. At least not in the way you're used to thinking of it. Oh there's a keyword alright, and it kind of does the thing you expect a lot of the times but it doesn't work the way that you probably think.

The fact of the matter is that in javascipt, this is no different than any other parameter. Let me show you.

Most people are aware that in javascript you can invoke functions like this doSomething(param1, param2) or like this doSomething.call(null, param1, param2). If you wanted, you can write all function invocations using .call

See that null there? Anything you pass in there is what this gets set to.

doSomething.call(null, param1, param2);
doSomething.call(obj, param1, param2);
doSomething.call(window, param1, param2);
doSomething.call("foobar", param1, param2);

If you don't use .call the runtime just takes a guess at what value you want there.

So given this, consider that the only difference between this and any other parameter is that you don't get to give this a name! Your problem is that you have two function scopes and the inner one has a variable named this which hides the outer one's this.

Solution: don't use this. Most libraries in fact (jquery included), don't force you to use this and also pass in the value as a regular parameter

    $('.personName').mouseover(function(event) {
        obj.highlight($(event.target).attr('faceIndex'));
    });

ambiguity solved!

Avoid using this in JavaScript, if at all possible. It is almost never necessary.

Answer 3

this in javascript is a very difficult thing to understand in callbacks because it may refer to virtually any instance. And that is because the callback is called from a different context.

The long story : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

As an alternative to previous answers :

One way I prefer dealing with it is by using a bind, also known as a proxy (in JQuery). jQuery has one implemented here : jQuery.proxy.

It has the benefit of letting you chose who is your this in the callback function.

For example:

var obj = {
    foo: function() {
        $('.personName').mouseover($.proxy(function(event) {
          // this refers here to obj instance
          console.log(this);
          // event is a jQuery decorated that holds the reference of your element 
          console.log(event);
        }, this));
    }
};

And the true benefit of it, is that it lets you construct components that don't have "ugly" nested callback anonymous functions:

var obj = {
    foo: function() {
        $('.personName').mouseover($.proxy(this.mouseOverCallback, this));
    },
    mouseOverCallback : function(event) {
       // this refers here to obj instance
       console.log(this);
       // event is a jQuery decorated that holds the reference of your element 
       console.log(event);
    }
};