JS函数的执行时机

函数的要素,每个函数都有以下这些东西：

1.调用时机

2.作用域

3.闭包

4.形式参数

5.返回值

6.调用栈

7.函数提示

8.arguments (除了箭头函数)

9.this (除了箭头函数)

今天主要讲解 调用时机。

一.调用时机

时机不同结果不同

fn不加()永远不会调用

例1

let a=1
function fn(){
  console.log(a)
}
a=2 //a更新到2了
fn() 

问打印出多少？ 
2

例2

let a=1
function fn(){
  console.log(a)
}
fn() //先调用
a = 2

问打印出多少？
1

例3

let a=1
function fn(){
  setTimeout(()=>{ //setTimeout 0一段时间(尽快)之后执行
    console.log(a)
    },0)
}
fn()
a=2

问打印出多少？
2

js会先执行当前代码，然后再做等会再做的事。

先执行a=2，然后执行setTimeout。

例4

let i=0
for(i=0;i<6;i++){
  setTimeout(()=>{
    console.log(i)  
  },0)
}
问打印出多少？
6个6

let i=0
for(i=0;i<6;i++){
    console.log(i)  
}
问打印出多少？
0、1、2、3、4、5

解析：

setTimeout忙完手头的事后，尽快做另件事。

每次for循环后,立马打印i

for执行了6次

补充： 为什么不是0～5？

一个i只有一个值，这里只有一个i，返回的是最新值。

例5

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

问打印出多少？
0、1、2、3、4、5

因为js在for和let一起用的时候会加东西，每次循环会多创建一个i

js为满足新人想法设计的

这种写法setTimeout根本没有意义

同样，下面2种方法也能打印出0～5。

for (var i=0; i<6; ++i) {  //利用 setTimeout 的第三个参数
	setTimeout(function(i){
		console.log(i)
	}, 0, i)
}

for(var i=0; i<6; ++i) {   //利用闭包
	!(function(j) {
		setTimeout(function(){
			console.log(j)
		}, 0)
	})(i)
}

js函数由于变量值会变，所以每次求值时都要想想代码的顺序。

如果不确定，那你求的值可能是以前的或者是错的。