Shulou(Shulou.com)06/02 Report--

This article mainly introduces JS how to use functions and closures, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Each function declared produces a scope. The outer scope cannot access the inner scope (hiding the inner variables and functions), while the inner one can access the outer one. Is a very useful technique for hiding variables and functions.

The method based on scope hiding is called the principle of minimum authorization or minimum exposure.

This principle means that in software design, the necessary content should be exposed to a minimum, and its content should be hidden, such as the API design of a module or object. Hiding variables and functions can resolve conflicts between identifiers of the same name, which can lead to unexpected overwriting of variables.

For example:

Var a = 2 X function foo () {var a = 3; console.log (a);} foo (); console.log (a)

Although this technique can solve some problems, it is not ideal and will lead to some additional problems. First, a named function foo () must be declared, which means that the name foo itself "pollutes" the scope. Secondly, the function must be explicitly called through the function name foo () to run the code in it.

This is more desirable if the function does not require a function name and can run automatically. Fortunately, js provides a solution to both of these problems-- (IIFE) Immediately Invoked Function Expression-- execute the function immediately.

Var a = 2; (function foo () {var a = 3; console.log (a);}) () console.log (a)

First, executing a function immediately is not treated as a function declaration but as a function expression.

Tell the difference between a function declaration and a function expression: see if function is the first word in the declaration. If it is the first word, it is the function declaration, otherwise it is the function expression. The function "(function") is executed immediately, not "function", so it is a function expression.

The most important difference between function declarations and function expressions is where their name identifiers will be bound.

The number of function names declared by the function is bound to the current scope. If you create a function declaration in the global scope, you can access the function name and execute it in the global scope. The function name of the function expression is bound in its own function, not currently in scope. For example, if you create a function expression globally, the function name of the function expression you create will report an error if you execute it directly, because there is no such identifier under the current scope, and you will return a reference to the function if you access the function name in the scope of the function expression.

Scope closure, well, the word closure here is a bit difficult to understand, (you can imagine that a package is closed, there is something mysterious in it) and the definition of closure goes like this: when a function can remember and access the scope, a closure is generated, even if the function is executed outside the current scope.

For instance (drag English, ).

Function foo () {var a = 2; function bar () {console.log (a);} bar ();} foo ()

The above code bar () accesses variables in the external scope. According to the above definition, is this a closure? Technically, maybe, but what we understand is that if the scope looks for variables in the current scope, if it is not found, it will continue to look up, find and return, and continue to look until the global scope. And these are part of the closure. The function bar () has a closure that covers the scope of foo ().

Function foo () {var a = 2; function bar () {console.log (a);} return bar;} var baz = foo (); baz ()

The code above shows the closure better.

The bar () function is executed outside the scope of the definition (in this case, in the global scope). After the execution of the foo () function, we usually expect the entire internal scope of foo () to be destroyed, because we know that the engine has a garbage collector to release memory space that is not in use, and because foo () has been executed, it looks like the content will no longer be used, so it is natural to consider alignment for recycling, which means that the functions and variables inside cannot be accessed. After foo () is executed, the baz variable holds a reference to the bar function. When executing the baz, that is, the bar function. Console.log (a). People who do not understand closures may think that they will report an error, but in fact, what is printed is "2". What?

Isn't the scope of the foo () function finished destroying? How can I still access the a variable? This is the closure.

When foo () is executed, the bar function is returned to the global scope, but the bar function retains the lexical scope at that time (the code was written in the order in which the scope was defined, and this scope is called lexical scope-the kind in which the outer function wraps the inner function) and even up to the global scope. So bar also has a reference to the foo () function. So that the foo () function is not recycled.

The closure can not say that he is not there, but you do not recognize him. In timers, event listeners, ajax requests, cross-window communication, or any other asynchronous (or synchronous) task, whenever callback functions are used, closures are actually used.

For instance

Function wait (message) {setTimeout (function timer () {console.log (message);}, 1000);} wait ("hello")

In the above code, you pass an internal function named timer to setTimerout (...). Timer has a closure that covers the scope of wait (...). Therefore, there is also a reference to the variable message. After 1000 milliseconds of execution of wait (), its internal scope does not disappear, and the timer function still retains the closure of the wait () scope.

The closure is closely related to the immediate execution of the function.

Cycles and closures

For (var I = 1; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.