Scope of THIS keyword in Function?

Question

Should 'this' in the following code not still refer to the DOM object selected by the MooTools selector?

        $$('div').addEvent('click', function()
        {
            var click1 = function(){$(this).setStyle('background', 'red');}
            click1();
        });

Answer 1

No. click1() isn't associated with any object (it's not e.g. callable as obj.click1()), so in it this refers to the window.

However, you can do:

click1.call(this);

The call method basically sets this to its first parameter.

Answer 2

You'll need to do this instead to refer to the element you want:

click1.call(this);

Otherwise this refers to window inside the function, you can see the working version here.

Answer 3

You should do it the MooTools way - by binding this to the click1 function - http://jsfiddle.net/oskar/7EArh/5/

$$('div').addEvent('click', function() {
    var click1 = function() {
        this.setStyle('background', 'red');
    }.bind(this);
    click1();
});​

Also this is already extended with MooTools methods, so there is no need for doing $(this).

Answer 4

The cleanest way to handle it is this:

var click1 = function() {
    this.setStyle('background', 'red');
};

$$('div').addEvent('click', click1);

in the above, 'this' get's passed to the function called.

Working example: http://jsfiddle.net/gT5dc/

Answer 5

In this kind of crazy situation, I just do:

$$('blah').addEvent('click', function() { var self = this;

var click1 = function(){ self.setStyle(....); }
click1();

});

... of course. mostly none of my code would include a click1(); at the end. These kind of inner functions like click1 would normally be used for some other purpose. for e.g.

var click1 = function(){ self.addClass('blah2').removeClass('blah'); } self.set('tween', { onComplete: click1 }).fade('in');