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函数由于变量值会变,所以每次求值时都要想想代码的顺序。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、为什么如下代码会打印 6 个 6 ? let i = 0for(i = 0; i<6; i++){ setTi...
    大鱼JOHN阅读 214评论 0 0
  • JS函数中,对函数调用的时机不同,得到的结果也会不一样,例如 下面这段代码 : 执行结果如下 : 结果显示打印出来...
    云卷云舒听雨声阅读 229评论 0 0
  • JS函数的调用时机 以下代码为什么会打印出6个6 因为setTimeout的意思是稍后执行,也就是在等for循环结...
    csy没有昵称阅读 189评论 2 1
  • JS函数的执行时机 在解释JS函数的执行时机之前,先来看一个例子 将console.log打印出来是什么呢?答案是...
    茜Akane阅读 154评论 0 0
  • 1. 为什么以下代码会打印出 6 个 6 要搞清楚这个问题,首先要要了解 JS 函数的执行机制和作用域 JS 的执...
    Yandhi233阅读 211评论 0 1