4 different scenarios of 'this'. What's the correct interpretation?

These are taken from the tuts-premium Jquery vid tutorials.
http://tutsplus.com/lesson/the-this-keyword/ Jeff explains what 'this' is referring to each time but I'm not sure I've grasped the reasoning behind them all.

Eg 1

function doSomething(e) { 
e.preventDefault(); 
console.log(this);
} 

$('a').on('click', doSomething);

In this case "this refers to the 'a' element" (being in this case the parent object)

I guess that's because here the statement equates to :

$('a').on('click', function (e) { 
    e.preventDefault(); 
    console.log(this);
    } 

So 'a' is the parent object

Eg 2

var obj = { 
    doIt: function(e){ 
    e.preventDefault(); 
    console.log(this);
    }
}

$('a').on('click',  obj.doIt);

In this case "this still refers to the 'a' element " (*but apparently it's not the parent object?)

It seems this time we're calling a method but the statement still equates to the same thing as Eg 1

*One thing in the tutorial has me a bit confused. I thought 'this' always refers to the parent object so in this case 'a' is still the parent object. But (at 05.23 in the tutorial ) he infers that's not the case, stating "there may be times when you want 'this' to refer to it's parent object which would be 'obj' " in which event he creates eg3.

Eg 3

var obj = { 
    doIt: function(){ 
    console.log(this);
    }
}

$('a').on('click',  function(e){    
obj.doIt(); 
        };
e.preventDefault(); 

In this case "this refers to the obj object"

I presume this to with the fact that 'this' is in a nested function as this statement equates to :

$('a').on('click',  function(){    
function(){ console.log(this);}
};
e.preventDefault(); 

I don't really understand why though, particularly as I read in an article that in nested functions 'this' "loses its way and refers to the head object (window object)".

Eg4

var obj = { 
    doIt: function(){ 
    console.log(this);     
    }
}

$('a').on('click',  function(e){    
       obj.doIt.call(this);             
       e.preventDefault(); 
});

In this case "This refers to the 'a'"

According to Javascript Definitive Guide "The first argument to both call() is the object on which the function is to be invoked" Here "this" is the used as the first argument. But "this" is not the object on which the function is to be invoked??
I think I get that the call function is there to invoke the function and use its first parameter as a pointer to a different object but I don't get why using 'this' means the function is invoked by 'a'. It's not something I've seen in other call() examples either.

Sorry for such a mammoth post. Hopefully someone's still reading by this stage…

I hope this helps clarifying the issue, it can be confusing indeed.

console.log(this); // window

 var obj = { 
     doIt: function(e){ 
         console.log(this);
     }
 }
 obj.doIt(); // obj

// This is the plain js equivalent of your jQuery example
document.getElementsByTagName['a'][0].addEventListener('click', function(e){
    console.log(this); // the first anchor on the document
});

// This is exactly the same:
var clickHandler = function(e){
    console.log(this); // the first anchor on the document
};
document.getElementsByTagName['a'][0].addEventListener('click', clickHandler); 

// Even if the handler is defined inside of another object, this will be
// the obj the event is bound to. It's the case of your E.g. 2
var obj = { 
    doIt: function(e){  
        console.log(this); // the first anchor on the document
    }
}
document.getElementsByTagName['a'][0].addEventListener('click', obj.doIt);
// When you pass obj.doIt to addEventListener above, you are passing a reference
// to that function. It's like "stealing" the function from the object

var obj = { 
    doIt: function(){ 
        console.log(this); // window 
    }
}
obj.doIt.call(window);

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this is a short introduction into the this keyword. And have a look into the reference for call() .

As jQuery calls (yes, with the .call() method) event handlers in the context of the dom element, all your examples are explained.

The way this behaves in JavaScript is a little confusing at first. Basically, unlike variables (which are statically scoped), this is dynamically scoped. That is, the value of this is determined by where you call the function rather than where you wrote it.

When you pass your function to on , it later gets called from a context where this is the element in question. This happens regardless of how you got that function. That is to say, a function does not care whether you access it using syntax like obj.fn or just its name fn --the value of the expression is the same in either case.

With things other than functions, this makes sense. Given:

var a   = 10,
    obj = { a : 10 };

you'll agree that the expressions a and obj.a have the same value. This is also true of functions.

In short: the value of this depends on where and how you call the function rather than how and where you declared it or how you referred to it before calling it.

上一篇: 在Linq中使用Expression <Func <T，X >>包含扩展名

下一篇: 'this'的4种不同场景。 什么是正确的解释？