函数的调用时机不同,结果不同。
举几个例子来解释
let a = 1
function fn(){
console.log(a)
}
以上代码打印结果:不会打印出任何东西,因为没有调用函数。
let a = 1
function fn(){
console.log(a)
}
fn()
以上代码打印结果:1
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
以上代码打印结果:2,因为在执行fn函数之前,a被赋值为2。
let a = 1
function fn(){
console.log(a)
}
fn()
a = 2
以上代码打印结果:1。a被赋值为2是在函数调用之后才发生。
let a = 1
function fn(){
setTimeout(()=>{
console.log(a)
},0)
}
fn()
a = 2
以上代码打印结果:2
setTimeout()方法将在指定的毫秒数后调用一个函数或对一个表达式求值。当延迟的毫秒数为0时,意味着“尽快”执行。上述代码是在执行完a = 2之后才执行console.log(a),所以打印结果为2。
有以下代码:
let i = 0
for(i = 0; i < 6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
打印结果为:6个6。
可以这样解释: setTimeout是一个异步任务,执行到这里的操作会被浏览器丢到另一个任务队列里去, 浏览器这时候会继续执行for循环。每一次for循环的时候,setTimeout都执行一次,但是里面的函数没有被执行,而是被放到了任务队列里面等待执行,for循环了6次,就放了6次,当主线程执行完成后,才进入任务队列里面执行。这时候因为for循环i=6了,所以输出的全部都是6。
让上面代码打印 0、1、2、3、4、5 的方法
- 方法一:
for(let i = 0; i < 6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
- 方法二: 利用const关键字
let i = 0
for(i = 0; i < 6; i++){
const x = i
setTimeout(()=>{
console.log(x)
})
}
- 方法三: 利用 setTimeout 的第三个参数,将i传进去
let i = 0
for(i = 0; i < 6; i++){
setTimeout((value)=>{
console.log(value)
},0,i)
}