Execution environment, scope (scope), and variable elevation (hoisting) in JavaScript

Let's look at the following code:

var a = 0;alert ("1st alert:a =" + a), function fun () {    alert ("2nd alert:a =" + a);    var a = 1;    SetTimeout (function () {        alert ("3rd alert:a =" + a);        A = 2;    },1000);    A = 3;    SetTimeout (function () {        alert ("4th alert:a =" + a);        A = 4;    },4000);} Fun (); alert ("5th alert:a =" + a);

The result of the code execution is:

1st alert:a = 0

2nd alert:a = undefined

5th alert:a = 0

3rd alert:a = 3

4th alert:a = 2

Question 1: For 2nd alert, why is the value of a undefined?

First, we look at the execution environment and scope of JS.

The execution environment (executing context) defines additional data that a variable or function has access to. In JS, there are two kinds of execution environment, one is the global environment, that is, the Window object in the Web browser, and the other is the execution environment of the function.

There is a variable object in the execution environment that holds all the variables and functions defined in the environment.

When the code executes, it creates a scope chain for the variable object, the front end of the scope chain is the variable object of the current environment, and then the variable object of the outer environment, one by one, to the global execution environment.

During the parsing of identifiers, searches are initiated from the front end along the scope chain, until an identifier is found or a full office environment is searched.

So in JS, the curly braces do not represent a separate scope, the variables defined in the loop body, and can still be accessed (in the same execution environment) outside the loop body.

Look at the following example:

var a = 0;function fun () {    alert ("a=" + a);} Fun ();

The result is a=0.

This is because the search identifier A is not found in the execution environment when the fun function is called, but a is found when the scope chain is searched for the outer scope.

And why the first example, 2nd alert, the value of a is undefined?

This is because in JS, a variable declared with Var or a function declared using a function declaration (not a function expression) is automatically added to the closest environment, the so-called variable elevation (hoisting). What do you mean, the code that corresponds to the first two lines of the above fun function definition becomes:

function Fun () {    var A;    Alert ("2nd alert:a =" + a);    A = 1;    Other codes}

So when searching for identifier A, you can search in this execution environment without searching the outer environment, so in 2nd alert, the value of a is undefined.

The same is true for the definition of a function, which is why the calling function can be placed before the function declaration, but not when the function expression is used.

Question 2:5th alert why before 3rd and 4th?

This is because the JavaScript engine is single-threaded for its task queue, and SetTimeout is an asynchronous code that executes asynchronously only when there is no synchronization code in the JS thread.

SetTimeout (function () {while (true) {}},1000), setTimeout (function () {alert (' End 2 ');},2000); SetTimeout (function () { Alert (' End 1 ');},100); alert (' End ');

So in the above code, the first thing that appears is end, followed by end 1, and never again. Because the dead loop in the first setTimeout function takes up a single thread of the JS engine, it blocks other processes.

Execution environment, scope (scope), and variable elevation (hoisting) in JavaScript