10前端面试题-js运行机制

NicesLife
310 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

一、运行机制类

一般Js运行机制类的前端面试题会考以下几点：

  • 如何理解JS的单线程
  • 什么是任务队列
  • 什么是Event Loop

二、相关面试题

  • 下面的代码最后的输出结果：1 3 2

  • setTimeout属于异步任务，程序执行时，运行第一行代码，会打印出1，然后代码继续执行，遇到setTimeout异步任务，将这个任务放到异步队列中，继续执行代码，运行最后一行代码打印出3。此时主线程空闲了，就会执行异步队列总的任务，即setTimeout任务，打印出2 image.png

  • 下面代码的输出结果：A，并且陷入死循环

  • 运行第一行代码，会打印出A，然后代码继续执行，和上一段代码一样，遇到setTimeout异步任务，将这个任务放到异步队列中，继续执行代码，此时会进入while的死循环，即主线程永远不会空闲，所以异步任务永远不会执行，即永远不会打印出B image.png

  • 下面代码的输出结果：4 4 4 4

  • for循环是同步任务，setTimeout是异步任务，所以每执行一次for循环就会将一个异步任务放到任务队列中，当for循环执行完毕，此时i=4。主程序空闲了就会从任务队列中取出异步任务执行，用于var声明的是全局变量，所以每个异步任务中打印的变量i都是全局变量i，所以最后会打印出：4 4 4 4

  • 如果用let声明变量i，由于let声明的变量i有作用域，所以每个异步任务中打印的变量i都是对应for环时的局部变量i，因此最后会打印出：0 1 2 3 image.png

三、任务队列和Event Loop 这部分的内容可以查看这两篇文章： JavaScript异步编程和# 12Js面试题-异步和单线程

四、异步任务

  • setTimeout和setInterval
  • DOM事件
  • ES6中的Promise

五、总结

关于运行机制这部分内容，需要掌握以下知识点：

  • 理解Js的单线程的概念
  • 理解任务队列
  • 理解Event Loop
  • 理解哪些语句会房屋异步任务队列
  • 立即语句放入任务队列的时机
avatar
文章
阅读
粉丝