The mention of closures always gives a very advanced feeling, and there are countless examples on the Internet. But I find that quite a few are not easy to understand. According to my observation, because these examples melted the concepts mentioned in the title, they tend to be more confused. So I want to piecemeal, and break it down into simple examples to explain.
1. Look at the scope first:
There are only two types of JavaScript scopes-global scope and intra-function scope, and no code block scope. Example:
function loop () {
for (Var i=0;i<5;i++) {
dosomething;
}
alert (i);
}
Loop (); The execution function result is 5.
Although the variable i is out of the loop code block, because JavaScript does not have a block-level scope, I is scoped to the entire function. The loop remains at 5 after the end of the cycle. Of course, as a local variable, the function is freed after execution.
The global scope is good to understand. Variables are valid throughout the execution environment of the page. There are two ways of defining a variable that is a global variable defined outside of all functions, and a variable without VAR, which is considered a global variable.
For example:
<script>
var i=10; Global variables
Function F1 () {
times=3; Global variables
}
</script>
2. Context and "this"
The context is about an "inheritance" of objects (functions), not a call relationship between functions. The mutual invocation between functions does not change the context, which means that there is another variable caller representation of the reciprocal calls between functions. Example:
function A () {
b ();
}
Function B () {
alert (this);//The other function call does not change the context and still points to window.
}
A ();
The functions that embody the reciprocal invocation of a function are caller:
function A () {
b ();
}
Function B () {
alert (B.caller);
}
A ();
This can be a good observation of the context of an object (function), in the traditional language this is not difficult to understand, refers to the object itself. In JavaScript, a function is also an object. If this function is an independently executed function, then this means the outermost context, or window, and if the function is defined as a property of an object, then its context points to that object.
Example:
function A () {
alert (this.name);
}
var obj1={
Name: "I am Obj1",
METHOD:A//property is a function
}
Obj1.method (); The context of the function object is obj1
Also use keyword call, apply to explicitly change the context of a function
For example:
function A () {
alert (this.name);
}
var obj1={
Name: "I am Obj1",
}
A.call (OBJ1); The context of the function is Obj1
3. Definition and invocation of function objects
This is a trivial, definition is defined, call is called ———— call is added "()". But I often look wrong, older old eyes dim. But there are times when it's not so good to tell. such as this:
var foo=function outer () {
return function inner () {
alert (this);
};
}();
Foo ();
In this example, Foo is the result of outer execution. Outer's execution returned a function, so Foo is also a function (in fact, it is inner, but there is no execution inner). When you execute Foo again, the context is actually window, which naturally returns to window.
4. Anonymous functions
Because the anonymous function is not "remembered" by which variable, it can only be defined and executed immediately, and the context is typically window.
such as this:
(function () {
alert (this);
})()
A bit more complicated:
(function Outter () {
return function inner () {
alert (this);
};
})()(); The code effect here and 3 is exactly the same.
5. Closures refer to functions that have access to variables in another function scope. Many developers confuse closures and anonymous functions--the book says. This is because closures are often implemented in the form of anonymous functions, but in fact they are irrelevant. Anonymous functions can be performed separately, such as the 4 bar example; Closures can also be implemented by non-anonymous functions, such as:
function Fout () {
var n=123;
return function fin () {
alert (n); 123
}
}
var f=fout ();
f (); Fin accesses the variable in the Fout, so although the fout has been executed, the local variable n is still retained, thus forming 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 very distinctive language. Refer to my other JavaScript features
JavaScript scopes, context contexts, definition and invocation of function objects, definition and invocation of anonymous functions, closures
