Learn the front end JAVASCRIPT-14, closures and inheritance from scratch

1: Closures

1. Concept: Closures are functions that can read other functions ' internal variables. In JS, only sub-functions inside the function can read local variables, so the closure can be understood as "a function defined inside a function".

2. Characteristics of closures

1) You can read the variables inside the function.

2) Keep the values of these variables in memory at all times.

3. The principle of closure

To understand closures, you must first understand the scope of the JS variable. The scope of a variable is nothing more than two (es5): Global variables and local variables.

The special point of the JS language is that the global variables can be read directly inside the function. On the other hand, the outside of the function naturally cannot read local variables within the function.

Attention:

1) When declaring variables inside a function, be sure to use the Var declaration. If not, you actually declare a global variable.

2) The scope of the local variable is determined when the function is defined.

For various reasons, we sometimes need to get local variables inside the function. But under normal circumstances this cannot be done. The only workaround is to define a function inside the function. An external variable cannot access an internal variable, but an internal variable can access an external variable, which is precisely because of the "chain Scope" structure (chain scope) that is unique to JS, and the child object looks up the variables of all the parent objects first-level. So all the variables of the parent object are visible to the child object, and vice versa. We only need to return the function and we can read the internal variables externally.

4. Closure application Scenarios

1) function as the return value.

<! DOCTYPE html>"en">"UTF-8"> <title> closures </title>function F1 () {varn =999; Nadd=function () {n+=1; } function F2 () {Console.log (n)}returnF2; }        varresult =F1 (); Console.log ("first execution of result") result ();//999Console.log ("implementation of the Nadd") Nadd ();//No outputConsole.log ("second execution of result") result ();// +</script></body>

2) The function is passed as a parameter.

<! DOCTYPE html>"en">"UTF-8"> <title> closures </title>function Fun (n, o) {console.log (o); return{fun:function (m) {returnFun (M, n);        }            }; }        varA = Fun (0);//undefined//not destroyed and saved in memory after executionA.fun (1);//0A.fun (2);//0A.fun (3);//0Fun (0). Fun (1). Fun (2). Fun (3); //Undefined, 0, 1, 2        varA = Fun (0). Fun (1); //Undefined, 0A.fun (2); //Undefined, 1A.fun (3); //Undefined, 1</script> </body>

5. Use Closure Note points

1) Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so the closure can not be abused. Doing so can cause a Web page performance problem that could cause a memory leak in IE. The workaround is to delete the unused local variables before the function exits (the value is null and the garbage collection mechanism is processed).

2) The closure changes the value of the inner variable of the parent function outside the parent function. So don't arbitrarily change the value of the inner variable of the parent function.

6. The demo uses the JS closure to realize the effect of mouse over interlaced color change.

2: Inheritance of constructors

Learn the front end JAVASCRIPT-14, closures and inheritance from scratch