closure

Closures are the == function == that has access to variables in the scope of another function.

function fn() { var max = 10; return function bar(x) { if ( x > max) { console.log(x); }}; } var f1 = fn(); f1(15);Copy the code

In the above code, the bar function is a closure, and you can explain a few concepts before you explain closures.

Scopes are divided into global scopes and function scopes (new block-level scopes in ES6). Scopes are created before code execution and function scopes are created at function definition time. A scope specifies the accessible scope of a variable, that is, the scope in which the variable can be looked up when used. The purpose of a scope is to isolate variables. Variables of the same name in different scopes do not conflict.

First box inside: global scope, second box inside: fn scope, third box inside: bar scope. As you can see, scopes can be nested. When you look for a variable in a scope that is not defined in that scope, you look in the next level of scope, so that == looks inside out == until you reach the global scope. This nesting of scopes from inside out is called a scope chain.

Execution context is divided into global execution context and function execution context. The global context is first entered, the function execution context is created at the time of the function call (push: push the execution context stack), the function execution context is destroyed at the end of the function call (push: push the execution context stack), and then back to the global context. Only one execution context can be active at a time.

Free variable A variable that exists in the current scope but is not defined. The value of a free variable is set to the value of the function’s scope == create ==.

function fn() { var max = 10; return function bar(x) { if ( x > max) { console.log(x); }}; } var f1 = fn(); f1(15);Copy the code

We know that variables can only be accessed from the inside out. In this code, the return value of fn() is bar, so line 9 assigns bar () to f1 (). Bar () contains a free variable x, and x is in fn(). However, the execution context of fn() cannot be destroyed (because it contains x, and the bar() function also needs to be used). The execution context of fn() cannot be destroyed until the bar() function has finished executing. In this case the bar() function is called a closure.

For cycle interview question analysis

D) The key point in this case is that the for loop is not a function, so I is a variable in the global scope. First execute the code in sequence:

elements = [li,li,li,li]

length = 4

elements[0].onclick = function() { alert(i); } // Note that the function is defined and not executed.

elements[1].onclick = function() { alert(i); }

elements[2].onclick = function() { alert(i); }

elements[3].onclick = function() { alert(i); }

I ++ is then executed, at which point the global scope variable I = 4.

Elements [0]. Onclick function() {alert(I); }, function() does not define variable I, so the upper level is the global scope to find the value of variable I, then I = 4, so the prompt 4.

Elements [1]. Onclick function() {alert(I); }, function() does not define variable I, so the upper level is the global scope to find the value of variable I, then I = 4, so the prompt 4.

.

So click on the prompts in sequence and you get 4,4,4,4.

var element = document.getElementsByTagName('li'); var length = element.length; for(let i =0; i < length; i++) { element[i].onclick = function () { alert(i); }}Copy the code

Click the prompt in order to get 0,1,2,3.

Block-level scopes are generated when the let keyword is used, and the braces for each loop are a separate block-level scope. Since I is used later, none of these block-level scopes are destroyed.

elements = [li,li,li,li]

length = 4

elements[0].onclick = function() { alert(i); } // In this block-level scope, I = 0

elements[1].onclick = function() { alert(i); } // In this block-level scope, I = 1

elements[2].onclick = function() { alert(i); } // In this block-level scope, I = 2

elements[3].onclick = function() { alert(i); } // In this block-level scope, I = 3

Elements [0]. Onclick function() {alert(I); } function() = function(); function() = function(); function() = function()

Elements [1]. Onclick function() {alert(I); } function() = function(); function() = function(); function() = function()

.

So click on the prompts in order to get 0,1,2,3. This is essentially creating a small closure internally, which can also be done by executing functions immediately, etc.

How do you generate closures in general

  • Returns the function
  • Functions are passed as arguments

Reference article:

www.cnblogs.com/wangfupeng1…

Blog.csdn.net/cauchy6317/…

Blog.csdn.net/qq_36276528…