Question

I’m trying to improve my JS skills and I’ve rewritten a bunch of code as a namespaced object literal (I think.) But now I have a “this”-related problem. Help me understand?

Here is abbreviated code.

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId();
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(){
        var thisClass = $(this).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}

So I’m sure you probably see the problem. In the findId function $this is undefined and I get an error. Earlier I had the findId logic in showLove and everything worked. I moved the findId logic to it’s own method because it was being used in a few different places.

So let me just ask this -> Why does $(this) point to the correct element in ‘showLove’ .. but not in ‘findId’? Since ‘findId’ is called from inside ‘showLove’, shouldn’t it have access to the same variables, including $(this)? Is this my first “self = this” situation?

I know this is a basic question, but if someone could help me understand, I’d .. uh.. ‘showLove’.

Answer 1

You’re passing MYAPP.showLove to jQuery and saying “attach this function as a click handler to the document”.

When you do this, MYAPP.showLove forgets it was attached to MYAPP, as you’re only passing the function, with no reference to the namespace.

Therefore, when showLove gets executed as a click handler, this is no longer MYAPP. Normally when you detach a function from an object this becomes either window or undefined (ES5). However, jQuery decides this should be the .showLove element that was clicked, by using call() or apply().

When you call MYAPP.findId() in showLove however, this is still set to MYAPP; as that’s what findId is attached to (you’re calling the method on MYAPP).

To fix this (no pun intended), you can either pass the value of this to findId (preferred, IMO), or use call()/apply().

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId(this);
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(which){
        var thisClass = $(which).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}

or:

var MYAPP = {

    init: function(){
        $(document).on("click",".showLove", MYAPP.showLove);
    },
    showLove: function(){
         var thisId = MYAPP.findId().call(this);
         $.post(//// do AJAXy stuff using thisId);
    },
    findId: function(){
        var thisClass = $(this).attr('class');
        var thisIdPos = thisClass.indexOf("id-")+3;
        var thisId = thisClass.substr(thisIdPos, 3);
        return thisId;
    }
}