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

This article introduces what the closure in JavaScript is like, the content is very detailed, interested friends can refer to, I hope it can be helpful to you.

1. The concept of closure

Let's look at the execution and inspiration of general functions:

Function stop () {var num = 0; console.log (num);} stop (); / / print out that num is 0 console.log (num); / / the error reporting function is not defined

1. At this point, the variables inside the function cannot be accessed by the outside of the function

two。 The variables defined within the function do not always exist and disappear as the function ends.

The concept of closure:

1. Is a function that has access to variables in another scope.

two。 On the other hand, closures occur when the life cycle of an internal function is greater than the declaration cycle of an external function, and the internal function is accessed by the external scope in some way.

Let's take a look at the following code and explanation of the closure:

Function fn () {var num = 10; / / function fun () {/ / console.log (num); / /} / / return fun; return function () {console.log (num); / / 10}} var f = fn (); f ()

We can break it down into several parts:

1. The fn function has an internal return value and is a function.

2. Num variables are printed internally in this function of return. The reason why you can print num variables is due to the access mechanism of the scope chain. The following will supplement the knowledge points of the scope and scope chain.

3. We accept fn () externally with the f variable, that is, we accept the return value of fn [internal function]

4. This is followed by a call to f, that is, a call to the internal function in fn. Finally be able to print 10

Supplement of knowledge points:

1. Scope:

Variables work within a range, but beyond that, they don't work. This scope is the scope. Scope is generated when a function is defined, not when a function is called.

two。 Scope chain:

In a word: according to [the internal function can access the external function variable], the nearest principle is used to look up the variable layer by layer. This mechanism is called scope chain.

Function A contains function B, then function B is the internal function of function A.

If the internal function wants to use a variable, first of all, let's see if there is a variable within itself.

If not, it will go to the next higher level to find it, [proximity principle]

If the function cannot be found at all, it will finally look under the global variable.

Var a = 1; var b = 11; function fn1 () {var a = 2; var b ='22; fn2 (); function fn2 () {var a = 3; fn3 (); function fn3 () {var a = 4 Console.log (a); / / 4 console.log (b); / / '22'} fn1 ()

3. Garbage collection mechanism

You can refer to this big brother's description of JS garbage collection mechanism:

/ / www.yisu.com/article/229425.htm

Let's look at the function of closures by combining these three concepts.

two。 The role of closures:

We call function A the outer function, and there is a function B inside this function.

The external variable f accepts the return value of function A [function B]

The variable in the scope of function An is called num.

1. Be able to access variables inside the function outside the function [build a channel for external access to the internal scope]

Principle: it has actually been explained above.

The first is to understand that the principle of the chain of action is shown above. Function B can call the variable num of function A.

The second is to understand that, first of all, the return value of function An is function B [internal function], and secondly, the return value should be accepted outside the function with the variable f. After acceptance, function B can be called, and function B will access the variable num of function A. And this internal function B is the closure function.

two。 It can prolong the life cycle of variables inside the function.

The first effect brings about the second effect. There is a garbage collection mechanism for variables in js. If the function is executed, the variables will be cleared and memory will be eliminated. However, if you use closures, variables can not be cleared immediately.

The reason is that the external variable f accepts the inner function B of function A, which accesses the variable num in the scope of function A. as long as the function B executes and the variable f exists, then the variable num will always exist. It does not disappear just because the execution of function An ends.

Refer to the following article, which is very detailed. I recommend it.

Detailed explanation of JavaScript closure

3. Closure example

Some applications of closures will be added later.

We need to remember where closures are used, and closures cannot be abused.

Click li to output the current li index number durian stinky tofu herring canned pig's feet / / closure application-click li to output the current li index number / / 1. We can add attributes dynamically by var lis = document.querySelector ('.nav'). QuerySelectorAll ('li'); for (var I = 0; I)

< lis.length; i++) { lis[i].onclick = function () { console.log(i); // 四个4 } } 原理：上图这样写，打印出来的i永远都是4。原因是，此时首先是非严格模式，在非严格模式下，for循环是同步执行任务，而按钮点击再执行是异步任务，同步执行完毕，i加到了4.再执行异步任务打印i，都是4。 改法1：用闭包 1.for循环生成四个立即执行函数 2. 立即执行函数是闭包的一种应用。立即执行函数里面的所有函数包括【点击 回调】函数都可以使用立即执行函数的传递的形参。 for (var i = 0; i < lis.length; i++) { (function (i) { // console.log(i); lis[i].onclick = function () { console.log(i); } })(i); } 改法2：var--->

Let

Click on the corresponding small li and print that I is the corresponding index number. Using let is ES6 syntax, where for has block-level scope

Var lis = document.querySelector ('.nav'). QuerySelectorAll ('li'); for (let I = 0; I < lis.length; iTunes +) {lis.onclick = function () {/ / console.log (I); console.log (I);}}

Modification 3: use the method of setting custom attribute index

Var lis = document.querySelector ('.nav'). QuerySelectorAll ('li'); for (var I = 0; I < lis.length; iTunes +) {/ / Note here is var, not let lis.index = I. / / Note that this is lis [I] not this.index. If there is no click at this time, where is the this lis.onclick = function () {console.log (this.index);}} so much about how the closures in JavaScript are shared here. I hope the above content can be helpful to you and learn more. If you think the article is good, you can share it for more people to see.

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.