JS function elements

  1. Call timing: the different execution timing of JS functions will affect the output result of function operation. It is not possible to judge what the function output is 100% by the code itself, but according to the specific execution timing of the function.
  2. Scope: Each function creates a scope by default
  3. Closures: JS functions look for the nearest variable
  4. Formal parameters
  5. The return value
  6. Call stack: when entering a function, it is necessary to save the environment before entering it. The more things there are, it is necessary to save an array. The array where the environment is stored is called call stack
  7. Function increase
  8. Arguments (except for arrow functions)
  9. This (except for the arrow function)

Function execution timing

Depending on the timing of a function call, the result will be different

let a = 1
function fn(){
    console.log(a)
}
// Nothing is printed because the function is not executed
Copy the code
let a = 1
function fn(){
    console.log(a)
}
fn() / / 1
// It is very simple to declare a, a value of 1, then call fn, print a.
Copy the code
let a = 1
function fn(){
    console.log(a)
}
a = 2
fn() / / 2
// We initially declare a with the value 1, and then assign 2 to a before the function. So it prints out the value of a as 2.
Copy the code
let a = 1
function fn(){
    console.log(a)
}
fn() / / 1
a = 2
// Change the value of a after the function is executed. When the function is executed, a is still 1.
Copy the code
function f1(){
    let a = 1
    function f2(){
        let a = 2
        function f3(){
            console.log(a)
        }
        a = 22
        f3()
    }
    console.log(a)
    a = 100
    f2()
}
f1()
// The output is
/ / 1
/ / 22
Copy the code

As can be seen from the above examples, the judgment of a variable value in a function needs to determine the timing of the function execution.

About Asynchronous Functions

About the setTimeout

// Interpret the following code to print six sixes

let i = 0
for(i = 0; i<6; i++){
  setTimeout(() = >{
    console.log(i)
  },0)}/ / 6
/ / 6
/ / 6
/ / 6
/ / 6
/ / 6
Copy the code

setTimeout

  • Used to call a function or evaluate an expression after a specified number of milliseconds;
  • It means to do it as soon as possible, not right away;
  • It can be interpreted as finishing the task at hand and performing it later.

SetTimeout is an asynchronous task, where the operation is thrown to another task queue by the browser, which continues the for loop. Each time the for loop is executed, setTimeout is executed once, but the function console.log(I) is not executed. Instead, it is queued for execution. Since I =6 after the for loop ends, console.log(I) outputs all 6.

How do you understand asynchrony? The asynchronous code does not wait for the result of the following code, so the timer is just on, not immediately executing the code inside, waiting for the current running environment code to finish executing the code inside the timer.

Conclusion: Asynchrony is code that doesn’t wait for results.

What if you want to print 0-5 as expected?

/ / method
/ / for the let to cooperate
for(let i = 0; i<6; i++){
    setTimeout(() = >{
        console.log(i)
    },0)}// 0 1 2 3 4 5
// Here let creates a separate scope equivalent to six I's.
Copy the code
/ / method 2
// Declare variables inside the for loop to store the value of I
let i
for (i = 0; i < 6; i++) {
    let x = i
    setTimeout(() = > {
        console.log(x)
    })
}
// 0 1 2 3 4 5
Copy the code
/ / method 3
// Use the immediate execution function
let i = 0
for(i = 0; i < 6; i++){
    setTimeout(!function (){
    console.log(i); } (),0)}// 0 1 2 3 4 5

Copy the code
4 / / method
// Use the third argument of setTimeout (callback function)
let i = 0
for(i = 0; i < 6; i++){
  setTimeout((value) = >{
    console.log(value)
  },0,i)
}
// 0 1 2 3 4 5
// In the code above, the last argument I will be used as the value of the callback function when it is executed after the main thread ends
Copy the code