1, what is this?
In short, this is one of many key defined in the JavaScript language, it's special is that it automatically defined within each function domain, but this guide to ground what things have been a lot of people scratching their heads, zhang 2 here we leave a little suspense, hope you can read this article answered this exactly guide,

2, this do?

What should the audience asked over there, since this is so difficult to understand, so for a very even use it? Let's look at an example:

The function the identify () {
Return this. The name. The toUpperCase ();
}
The function sayHello () {
Var the greeting="Hello, I" m "+ the identify. Call (this);
The console. The log (greeting);
}
Var person1={
Name: "Kyle"
};
Var person2={
Name: "Reader"
};
The identify. Call (person1);//KYLE
The identify. Call (person2);//READER
SayHello. Call (person1);//Hello, I 'm KYLE
SayHello. Call (person2);//Hello, I 'm READER

This code is very simple, we define two functions, the identify and sayHello respectively, and under the environment of different objects to perform them, achieved the effect of reuse, rather than to perform in a different object environment must write the corresponding function according to different object environment, in short, this function is to bring the reuse, the guest officer asked over there, I don't like this can be achieved, such as:

The function the identify (context) {
Return the context. The name. The toUpperCase ();
}
The function sayHello (context) {
Var the greeting="Hello, I" m "+ the identify (context);
The console. The log (greeting);
}
Var person1={
Name: "Kyle"
};
Var person2={
Name: "Reader"
};
The identify (person1);//KYLE
The identify (person2);//READER
SayHello (person1);//Hello, I 'm KYLE
SayHello (person2);//Hello, I 'm READER

A look at carefully, given the guest officer solution indeed reached a similar effect, praise a! I want to say is that with the increase of code, function, nested calls at all levels is becoming more and more complicated, such as the transfer of an object reference will become more and more not smart, it will make your code is very mess, even you yourself don't understand clearly, and this mechanism provides a more elegant and agile, pass an implicit object references to make the code more concise and reuse, good, know the usefulness of this, then take a look at our misunderstanding of it,

3, misunderstanding about this

Believe that a lot of children's shoes is learned other languages, in many programming languages have this mechanism, the inertia of thinking brought understanding of it in other languages to JavaScript, at the same time, because of this the understanding of this word in our produced all kinds of misunderstandings about it, so, before the start, let's clarify the misunderstanding of it,

3.1 a misunderstanding: this reference function itself

As we all know, in the function can achieve recursive reference function and the effect of the assignment to the function property, which in many application scenarios seem to be very useful, so a lot of people think this is to guide the function itself, for example:

The function fn (num) {
The console. The log (" fn: "+ num);
//count is used to record the fn number is called
This. Count++;
}
Fn. Count=0;
Var I;
for (i=0; i<10; I++) {
If (I & gt; 5) {
Fn (I);
}
}
//fn: 6
//fn: 7
//fn: 8
9//fn:

The console. The log (fn. Count);//0 - yeah? Why not 4 to knead?

Above we want to record the number of fn is called, but obvious fn is called four times but still the count is zero, what happened to knead? Here under the simple explanation, fn in the fourth on the implicit creates a global variable count, due to the initial value is undefined, so every time the increase is still not a number, do you print the count under the global environment (Windows. Count) of the output should be NaN, and function of the definition of line 6 familiar with variable count remains unchanged, or 0, if to the execution result is not clear, welcome to see me the other day that blog post (chat JS scope closure scope and closure of the scope and closure), here, you only need to know, this reference is the function that understanding is wrong,

Here will be asked again, since this is not a reference function, so I want to achieve recursive functions, the zha reference? Interface under simple answer a question here, and two methods: (1) function in the body with the function name to refer to the function itself. (2) function in the body use the arguments of the callee to reference function (not recommended), since then the second approach is not recommended, anonymous functions zha reference? In the first, and give the anonymous function can be a function name (recommended),

3.2 the myth: this reference is the function of the lexical scope

This cheat some people may be more misunderstanding, first of all, to clarify, this does not refer to the function of the lexical scope, JS indeed within the engine for the realization of lexical scope really like an object, with properties and functions, but this is just the JS engine an implementation, are not visible for the code, namely lexical scope "object" can't take in the JS code, (about lexical scope, if you don't understand, you can refer to a previous post "chat JS scope of scope and closure closure scope and closure"), see a wrong example:

The function fn1 () {
var a=2;
Enclosing fn2 ();//that this reference is fn1 lexical scope
}
The function fn2 () {
The console. The log (enclosing a);
}
Fn1 ();//ReferenceError

The above code clearly did not perform the desired results, so as to be able to see this and there is no reference function of lexical scope, even, you can be sure that this example fn2 can be executed correctly are accidental in fn1 (understand the lexical scope you can't know why here to perform an error),

4, this is related to what?

Good, pull so much didn't dry, some in the audience began to close the current page started to leave, here, we solemnly declare: this with function definition didn't have anything to do where, where is the function call to determine the this reference is what in the end, that is to say this with function definition of it doesn't matter, have big concern with function of execution, so remember, "where is the function call to decide to whether this quote is what",

5, this mechanism of the four rules

This is binding or references which object environment depends on the function is invoked, and the function call has a different way, in a different way call is this reference is to decide which object is determined by four rules, we one by one to see,

5.1 the default binding global variable

This rule is the most common, also be the default, when the function is called single definition and application of the rules are binding global variables, as follows:

The function fn () {
The console. The log (enclosing a);
}
var a=2;
Fn ();//2 - fn calls alone, this reference window

5.2 implicit binding

Implicit call mean, when a function call with a context object, as if this function is belong to the object, for example:

The function fn () {
The console. The log (enclosing a);
}
Var obj={
A: 2,
Fn: fn
};
Obj. Fn ();//2 - this reference obj,

To note that the last one to call the function of the object is to the function of the context object (around meng), such as:

The function fn () {
The console. The log (enclosing a);
}
Var obj2={
A: 42,
Fn: fn
};
Var obj1={
A: 2,
Obj2: obj2
};
Obj1. Obj2. Fn ();//42 - this quote is obj2.

And one more thing to say is that losing implicit binding, as follows:

The function fn () {
The console. The log (enclosing a);
}
Var obj={
A: 2,
Fn: fn
};
Var bar=obj. Fn;//function reference
Var a="global";//define a global variable
Bar ();//"global"

As above, although line 8 has implicit binding, but the effectiveness of it is clearly the fn is assigned to the bar, bar to perform like this, is still the default binding global variable, so the output above,

5.3 show binding

Studied the bind () \ the apply (), call () function should know, it receives the first parameter is the context object and assign it to this, look at the following example:

The function fn () {
The console. The log (enclosing a);
}
Var obj={
A: 2
};
Fn. Call (obj);//2

If we pass the first value for simple values, so the background will be automatically converted to the corresponding encapsulated objects, if passed is null, then the result is binding to the default global variables, such as:

The function fn () {
The console. The log (enclosing a);
}
Var obj={
A: 2
};
Var a=10;
Fn. Call (null);//10

5.4 the new new object binding

If it is a constructor, then to call with the new, then the binding will be the newly created object, such as:

The function fn (a) {
Enclosing a=a;
}
Var bar=new fn (2);
nullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnullnull