看一道简单的题目,控制台会输出什么?

释放双眼,带上耳机,听听看~!

仔细看下,内容如图,你觉得会输出什么?不要再想着直接复制粘贴到浏览器运行了

image.png

答案是

why?听我娓娓道来

第一条:demo(18)执行 触发console.log(obj1, arg)

答案undefined, funtion arg(){}

  • obj1 >>> undefined 这里可能大部分人都知道,因为函数的变量提升
  • arg >>> function 是为啥呢?为啥不是 18

这里要引出第一个知识点:预编译

预编译

运行函数demo的前一刻发生了预编译环节

  • 第一步,生创建AO(Activation Object)对象:可以理解为demo这个函数拥有的一个冰箱,在执行内部代码时就通过这个冰箱来取东西(变量,函数…)
  • 第二步,将形参和变量声明当作AO的属性名,值为undefined
  • 第三步,将形参和实参相统一。
  • 第四步,在函数体里找函数声明,将值赋为函数体

实参18 其实是在第三步。而第四步又被函数体所覆盖。所以第一条arg是function…

第二条 执行console.log(length)

答案undefined。这个不用讲。

第三条 执行console.log(length)没有疑问吧

答案108。这里已经执行了赋值length = 108

第四条 执行if(console.log("undefined") || ....

答案undefined, 没有想到吧?if判断条件内的也会被浏览器执行。不光是可以执行,而且还没有返回值。所以这个时候回走进后面的或 (!!”” + “1” && typeof typeof null && !!length) 然后进行一系列操作:

  • !!”” + “1” >>> 字符串false1(强制类型转换)
  • typeof typeof null >>> typeof “object” >>> 字符串string

第五条 执行obj2.say(光头强,77)没有疑问吧

答案熊大,77。 setTimeout 你先等等!!为啥不是光头强呢?因为say的this是obj1呀。

第六条 执行promise.then : obj2.say(光头强,age)

第七条 执行obj1.say(熊三,88)

第六第七条,就是setTimeout 和promise的较量,也就是当然是微任务promise.then先执行了。

总结

最后,讲解更加详细:

转载于:WEB 前端学习圈
来源于:WEB 前端学习圈

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

元宇宙相关的前端技术(最新技术)

2021-12-22 21:35:31

前端技术

几百行代码肝个斗图机器人!

2021-12-22 21:40:45

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索