Delve into the ubiquitous this in JS

Always feel JS in the this is everywhere but elusive, although his call principle is very simple, is related to the call form, but the call way a variety of, undersea needle ah. Try to use a variety of methods to interpret, and sometimes can not say why. Today simply withstand the actual experience under the heart, try, try to understand the actual situation of the behavior of this way, welcome to exchange.

-----------------------------------------------> Functions related to this<---------------------------------------------- -------

Let's look at one of the most simple examples:

This will of course be undefined, because the point of this is actually a call to it.

Here are two special cases in which the performance of this in closures is:

Because the closure is executed immediately, which is equivalent to the function of the global role in the downward use, so, as you can see, he pointed to the window.

But ... in strict mode:

This is the sequela of using strict mode in closures, which does not point this to the global scope.

Here is a summary of the "use strict" in JavaScript, summed up pretty well understand: http://www.web-tinker.com/article/20125.html

So the this is pointing to his call, exactly how it points to it, let's try a few small examples to see how it behaves:

1. The most common:

See, just undefined, call this to point to the scope of the call it Oh.

This more confirms that this point is called to the scope of his call.

2. So I'm going to try to nest the functions for a moment:

Or window, here This is the window, it seems to say that it is not clear, write your own try to think, experience oh.

3. This is basically the case when the function is called, so let's try the function reference below to see what it looks like, slightly more complicated:

It turns out that a reference function can change the execution scope of a function, but as before, the calling function does not change the scope of the function's execution:

It turns out that the bar function does not change the execution scope of the function (note the me in the previous two pieces of code: How to use it later).

this<--------------------------------------------in------------------------------------------------> Constructors --------

1. Let's take a look at JS in the simple package process used in this:

The above implementation is not a strict encapsulation, but from which we can see the role of this.

2. Don't worry, there must be something interesting about it:

This creates a new object through new and passes this object through this to the constructor, which is why the scope of B runs to a{}.

What is this for?? Let's take a look at the new constructor: What's the use of this?

In simple terms:

In fact, the function of new is to make this point to a new object and return this.

The actual operation of the case is this:

1 function Person () {2     // var obj = new Object (); 3     // this = obj; 4     Alert (this);     // New Person Object 5     // return this; 6 }7varNew

In fact, the implementation of JS is this:

1 functionnewoperator (constr, args) {2     varThisvalue = Object.create (Constr.prototype);//(1)3     varresult =constr.apply (Thisvalue, args);4     if(typeofresult = = = ' object ' && result!==NULL) {5         returnResult//(2)6     }7     returnThisvalue;8}

Look at the information on the Internet when you see, Link here: Http://speakingjs.com/es5/ch17.html#_the_new_operator_implemented_in_javascript

---------------------------------------------the impact of >call and apply on this <--------------------------------------- ---------------------

See Example:

Here This will point to the string.

The above example, by call (), uploads x, y, to the function.

this<--------------in-------------------------------------------------------> Timers (settimeout,setinterval) ------------------------------------------------

First look at the simplest:

This is a pointer to window.

In fact, because settimeout () and SetInterval () are released at the window, of course, they point to window.

More evidence of what has been said above.

The this<------------------------------------------------------------------------------------------>eval () ------------------------------------------------

Call Eval directly ():

If you call eval () directly, this points to the current scope. (' Use strict ' is not the same)

The following shows the situation where the call is not straightforward:

this<-------------------------------------in-------------------------------------------------------> complex situations -------------------

In the process of finding information, found a summary of very good, complex case of this priority, affixed to the collection:

Priority level	Scene	The value of this	Note
1	New	New out of the empty object
	Apply/call	Parameters passed in	Tie, Apply/call can't appear with new. New Arr1.show.apply ("1"); Error
2	Timer	Window
3	Event	The element in which the event occurred
4	Method	Owner
5	Others (nested, etc.)	window | | Undefined	See if it's a strict mode

Note: No matter how you modify this,this, it only affects one layer

Cases:

If you find another this in the back, then add ....

Delve into the ubiquitous this in JS