4 different 'this' scripts. What is the correct interpretation?

Question

They are taken from jquery vid tutorials for premium.
http://tutsplus.com/lesson/the-this-keyword/ Jeff explains what 'this' means every time, but I'm not sure I understood all these considerations.

eg. one

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

In this case, "this refers to the" element "(in this case, the parent)

I assume that because here the operator is:

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

So 'a' is the parent

eg. 2

 var obj = { doIt: function(e){ e.preventDefault(); console.log(this); } } $('a').on('click', obj.doIt); 

In this case, "does this still refer to the" element "(*, but apparently this is not the parent object?)

It seems that this time we are calling a method, but the statement is still the same as, for example, 1

* One thing in the textbook confuses me a little. I thought that 'this' always refers to the parent, so in this case, a is still the parent. But (at 05.23 in the textbook) he points out that this is not so, stating: “there may be times when you want 'this' to refer to its parent object, which would be" obj ", in which case it creates eg. 3.

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 believe this is due to the fact that 'this' is in a nested function, since this operator is equal to:

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

I really don’t understand why, although, in particular, I read in the article that in this function 'this' "loses its path and refers to the main 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" a "

According to the Javascript Definitive Guide, "The first argument to call () is the object on which the" Here "function should be called, this is used as the first argument. But "this" is not the object on which the function should be called?
I think I get that the call function is there to call the function and use its first parameter as a pointer to another object, but I don’t understand why using 'this' means that the function is called by 'a'. This is not what I saw in other calls ().

Sorry for such a mammoth. Hope someone else is reading this scene ...

Answer 1

I hope this helps clarify the problem, it can be confusing.

• When this free of your code, it will refer to the global object (in web browsers, i.e. window ).

   console.log(this); // window 

• When this is inside the method of the object (for example, on yours, for example, 3), it will refer to the object. This applies to objects created using new , or as object literals (for example, in your example).

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

• Inside the event handler, this will refer to the object to which the event is bound.

   // 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 the case of your Eg 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 like "stealing" the function from the object 

• When an object is passed as the first parameter to Function.call or Function.apply , if this appears inside the function, it will refer to the object you passed. This is a way to force what this points to.

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

Answer 2

This behavior in JavaScript is a bit confusing. Basically, unlike variables (which have a static scope), this has a dynamic scope. That is, the value of this is determined by where you call the function, and not where you wrote it.

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

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

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

You will agree that the expressions a and obj.a have the same meaning. This also applies to functions.

In short: the meaning of this depends on where and how you call the function, and not how and where you declared it, or how you referenced it before calling it.

Answer 3

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this - a brief introduction to the this . And look at the call() link.

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

Answer 4

Really rate these answers guys. I posted at the beginning of hrs and tried (& necessary) to digest your reviews a bit.

https://developer.mozilla.org/en/JavaScript/Reference/Operators/this was a great scream. I read a lot of articles / articles, and this one seems to be one of the best.

I think the main enlightenment was that the object associated with 'this' is determined by how / where the function was called (the calling context), and not how and where the function was defined.

So, just to bring things back to the Q & A area and try to answer my own Q in the light of what you guys answered ...

eg. 1 Here: the "doSomething" function is called in the context of the click handler, so the object bound to 'this' is "a"

eg. 2 Again, the click handler still calls the function, so the object bound to 'this' is "a"

eg. 3 In the nested function, the calling context is obj.doIt (). So, as he says in the tutorial, the object tied to 'this' is "obj".

Although, based on the similar logic in the developer.mozilla.org example below, there is no object truly associated with "obj.doIt":

 ob = {g: independent, prop: 42}; console.log(obg()); // logs 42 

"only the most immediate member link affects this binding ... it will refer to ob inside the function. The fact that the object itself is a member of o does not matter, the most important link is all that matters."

eg. 4

Here - the task of 'call' should indirectly call the function, as if it were a method of a new object - in this case we defined it as 'this'. Here 'this' means "a" as part of the function invoked by the click handler.

Hope this is a little closer. I feel like a fool on this (terrible pun) because the answers are presented to me, but I'm still not quite sure that I am nailing the concept.

If I need to return to my hole for a while to digest, I request newby status, a short-term failure of Javascript & JQuery for several weeks.

Thanks again for the feedback everyone.