What is the order in which JS code is executed?

What I bring to you this time is the order in which JS code is executed. Strictly speaking, javascriptThere is no concept of multiple threads. All programs are single Threads are executed sequentially. This article will give you a detailed analysis.

1. What is single thread?

In layman’s terms, when the code is executing, if another piece of code wants to be executed, it must wait until the current code is executed. Let's take a piece of code to explain it

for(var i=1;i<=3;i++){
  setTimeout(function(){
    console.log(i); //输出：4,4,4
  },0)
}

Let's take a look at the above code. Since the delay time is set to 0, then the loop should be executed once and an i should be printed immediately, but in the end The printed result is: 4, 4, 4. The reason why the above results occur is precisely because the js code is a single-threaded application.

During the execution process, for loop is encountered first, and the for loop enters the thread first. When i=1, after the loop reaches setTimeOut, the for loop has not yet completed execution, and setTimeOut will be put into a place (thread pool) to wait for execution. At this time, the for loop continues to execute. When i=2, the for loop has not yet finished executing. At this time, setTimeOut will still be placed in the thread pool waiting for execution... and so on, until the for loop completes 3 times, the for loop After the execution is completed, the thread is idle at this time. The setTimeOut waiting for execution in the thread pool executes and prints i in sequence. After the for loop execution is completed, i becomes 4, so three 4s are printed.

2. If you want to change the above situation, you can use the following code

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

2. # in js ##Function scope and code execution

　>>>Function scope

Let’s first understand the following concepts:

　1 , In the js language, there is no block-level scope similar to

c language.

　2. The top-level scope in the js language is within the

window object scope, which is called the global scope. Variables declared in the global scope are global variables.

　3. Variables within the scope of a js function can only be used inside the function and cannot be used outside the function. Such variables are local variables.

　4. JS functions can be nested. The nesting of multiple functions constitutes the layer-by-layer nesting of scopes. This is called the scope chain in JS.

5. JS scope chain variable access rules:

(1) When the variable to be accessed exists in the current scope, use the variable in the current scope.

　　 (2) When the variable to be accessed does not exist in the current scope, it will be searched in the upper scope until the global scope.

　>>>Execution sequence

js code execution is divided into two parts:

1. Code checking and loading stage (pre-compilation stage), this stage Declare variables and functions, but do not assign values ​​to variables. The default value of variables is undefined.

　2. The execution phase of the code. In this phase, variables are assigned values ​​and functions are declared.

After looking at some of the specific concepts above, let’s take a piece of code to illustrate:

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
  var a=1;
  console.log(a); //输出：1。
}
func();

Look at the above code: the first a outputs undefined. Reason: According to the access rules of js scope chain, the variable a to be accessed exists in the current scope, so the variable in the current scope is used. According to the execution order of the js code, a at this time is only declared but not assigned. The default is undefined, so undefined is output.

The second a outputs 1. It is precisely because a has been declared and assigned a value at this time, so a outputs 1.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed introduction to the use of require.js

Using jQuery to deduplicate arrays Sorting operations

How to use the ES6 destructuring assignment function

The above is the detailed content of What is the order in which JS code is executed?. For more information, please follow other related articles on the PHP Chinese website!