A problem in JavaScript scope that surprises you

In most languages of Class C, a block of code enclosed by a pair of curly braces is a scope. But the scope of JavaScript is defined by functions. Variables defined in a function are only visible inside the function, which we call the function scope.

1. Referencing a variable in a function, JavaScript searches the current function scope, searches the upper-level scope without finding it, and continues to the global scope.

var 123 ;　　var f = function () {console.log (a);  var456;} F () You might expect to output 123, but actually output the undefined. Why? we can analyze the above text description, call the F function, when the Console.log access a variable, JavaScript will first search the current function scope, happens to be in the F function scope to search for a variable, so the outer variable set a=  123 will be masked out, but when executed to Console.log, A is not initialized, so the output is undefined. We can further understand that variables defined anywhere within the function (i.e., in order of precedence) are defined as soon as they enter the function, but are not initialized until they run to the Var line. 

2. Nested relationships of function scopes

The nested relationship of a function scope is determined at the time of definition, not when it is called. That is, the scope of JavaScript is a static scope, and the nested relationships of the scopes are determined at the time of parsing, rather than waiting for the runtime to determine. How to understand it? Look at the example below.

var 123 ; var f1 =function () {Console.log (a)};
var f2 =function () {
var a = 456;
　　  F1 ();
};
F2 ();
You might expect to output 456, and yet again, the actual output is 123. With F1 called by F2, when looking for the definition of a, the A variable defined by the F1 parent scope (that is, the a variable of the global scope) is found, not the A variable defined in F2.
Indicates that a nested relationship for a function scope is determined at the time of definition, not when called.

3.

var a = [1,2,3]for (var0; i < a.length; i++ {    setTimeout ()} (function () {
Console.log (A[i])    }
Three times the output is undefined. Since settimeout is equivalent to an asynchronous operation, the I variable value is 3 after the end of the loop. Then 0.1 seconds later, Console.log call I, three output I value is 3,a[3] naturally does not exist

According to the following settings, you can output a settimeout as expected, the equivalent of a closure, the incoming I will not be destroyed when the function is not finished executing

var a = [[+]
for (var i = 0;i < A.length; i++) {
(function (i) {setTimeout () {
Console.log (A[i])
},100)}) (i)
}

An unexpected problem in the JavaScript scope