JavaScript scope, context, definition and call of function objects, definition and call of anonymous functions, and closure

JavaScript scope, context, definition and call of function objects, definition and call of anonymous functions, and closure
The introduction of closures always gives people a deep feeling that there are countless examples on the Internet. However, I found that a considerable amount of data is not easy to understand. According to my observations, these examples combine the concepts mentioned in the title and tend to get confused. So I want to convert it to zero and split it into a simple example to explain it.


1. Check the scope first:
There are only two types of JavaScript scopes: global scope and function internal scope, and there is no code block scope. Example:


Function loop (){
For (var I = 0; I <5; I ++ ){
// DoSomething;
}
Alert (I );
}
Loop (); // The result of executing the function is 5.


Although variable I is out of the circular code block, because JavaScript does not have a code block-level scope, the I scope is within the entire function. After the cycle ends, it is still 5. Of course, as a local variable, the function is released after execution.


The global scope is easy to understand. Variables are valid in the execution environment of the entire page. There are two methods to define a variable: one is to define a global variable outside all functions, and the other is to define a variable without var, which is considered a global variable.
For example:
<Script>
Var I = 10; // global variable
Function f1 (){
Times = 3; // global variable
}
</Script>


2. Context and "this"
The Context Environment refers to the "inheritance relationship" of objects (functions), rather than the call relationship between functions. The intercall between functions does not change the context, indicating that the intercall between functions is represented by another variable caller. Example:
Function (){
B ();
}
Function B (){
Alert (this); // when called by other functions, it still points to the window without changing the context.
}
A ();


Caller:
Function (){
B ();
}
Function B (){
Alert (B. caller );
}
A ();


Through this, we can observe the Context Environment of an object (function). In traditional languages, this is not hard to understand, but refers to the object itself. In JavaScript, a function is also an object. If this function is an independently executed function, this means the context of the outermost layer, that is, window. If the function is defined as an object attribute, then its context environment points to this object.
Example:
Function (){
Alert (this. name );
}
Var obj1 = {
Name: "I am obj1 ",
Method: a // the property is a function.
}
Obj1.method (); // The context of the function object is obj1


In addition, you can use the call and apply keywords to explicitly change the context of the function.
For example:
Function (){
Alert (this. name );
}
Var obj1 = {
Name: "I am obj1 ",
}
A. call (obj1); // The context of the function is obj1


3. Define and call function objects
This is not worth mentioning. The definition is definition, and the call is call-the call is "()". However, I often watch out and get dizzy when I get older. But there is indeed a poor resolution. For example:
Var foo = function outer (){
Return function inner (){
Alert (this );
};
}();
Foo ();
In this example, foo is the execution result of outer. The execution result of outer is still a function, so foo is also a function (in fact, it is an inner, but it is not executed at this time ). When foo is executed, the context is actually window, and the window is also returned.


4. Anonymous Functions
Because anonymous functions are not "remembered" by any variable, they can only be defined for immediate execution. Generally, the execution context is window.
For example:
(Function (){
Alert (this );
})()
More complex:
(Function outter (){
Return function inner (){
Alert (this );
};
}) (); // The effect of the Code in the three sections is the same.


5. Closure refers to the function that has the right to access the variables in another function scope. Many developers confuse closures and anonymous functions, as described in the book. This is because closures are often implemented in the form of anonymous functions, but they are irrelevant. Anonymous functions can be executed independently, as shown in the example in section 4. Closures can also be implemented by non-Anonymous functions, for example:


Function fout (){
Var n = 123;
Return function fin (){
Alert (n); // 123
}
}
Var f = fout ();
F (); // fin accesses the variables in the fout, so although the fout has been executed, the partial Variable n is retained to form a closure.


Of course it is not difficult to change to an anonymous function:
Function fout (){
Var n = 123;
Return function (){
Alert (n); // 123
}
}
Var f = fout ();
F ();


In short, JavaScript is a distinctive language. Refer to my other JavaScript features.