准备面试的你，必看这6道JavaScript面试题，摸透JavaScript的基础

一、执行以下代码，测试浏览器会输出什么

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 执行以下代码，观察输出结果 */var a = 10  // 全局作用域，全局变量 a = 10function foo() {  // var aconsole.log(a) // a = undefinedvar a = 20  // a的实际赋值在这console.log(a)  // a = 20}foo()/* 解释如下 *//* 使用var关键字声明的变量在JS中会被提升,并在内存中开辟空间，由于没有赋值，无法定义数值类型所以默认为 undefined ；var声明的变量，真正的数值初始化是在你确定赋值的位置var声明的变量是函数作用域的*/</script>
</body>
</html>

如果将上述代码的var换成let或者const会发生什么效果？

二、newArray中有哪些元素

<script>/* newArray中有哪些元素 */var array = []for (var i = 0; i < 3; i++) {array.push(() => i)}var newArray = array.map(el => el())console.log(newArray)</script>

这个问题是循环结构带来的一种块级作用域的午去，在循环内部使用var声明的变量，就是单个声明的变量绑定（单个存储空间）。在循环过程中，这个var变量会随着循环变化。但是循环中执行的push()方法，最后实际上是push了i最终的循环结束的3个值。所以最后push进去的全都是3。

如果想记录每一次循环的值，可以用let声明一个具有块级作用域的变量，这样可以为每一个循环迭代创建一个新的绑定。

三、如果我们在浏览器中控制台中运行foo函数，是否会导致堆栈溢出错误

JavaScript的并发模式基于我们通常所说的事件循环，浏览器是提供运行时环境来给我们执行JS代码的。浏览器的主要组成包括调用堆栈、事件循环、任务队列、WEB API。像一些常用的定时器setTimeout，setInterval这些全局函数就不是JavaScript的一部分，而是WEB API给我们提供的。

JS调用栈是先进后出的，引擎每次从堆栈中取出一个函数，然后从上到下依次运行代码。每当它遇到一些异步代码，它就把它交给web APi(箭头1).因此，每当事件被触发时，callback都会被发送到任务队列(箭头2)。

事件循环不断地监视任务队列，并按他们排队的顺序一次处理一个回调。每当调用栈为空时，事件循环获取回调并将其放入堆栈（箭头3）中处理。注意：如果调用堆栈不为空，则事件循环不会将任何回调推入堆栈。

那么上面这道题的实现步骤如下：
①调用foo()会将foo函数放入调用堆栈(callback)
②在处理内部代码时，JS引擎遇到了setTimeout
③然后将foo回调函数传递给web API(箭头1)并从函数返回，调用堆栈再次为空
④计时器被设置为0，因此foo将被发送到任务队列（箭头2）
⑤由于调用堆栈时空的，事件循环将选择foo回调，并将其推入调用堆栈进行处理
⑥进程再次重复，堆栈不会溢出

四、如果在控制台中运行以下函数，页面选项卡是否会有响应

很多时候，我们都会认为循环事件图中只有一个任务列表，实际上是可以有多个任务列表的。由浏览器选择其中一个队列并在该队列进行处理回调。

从底层来看，JavaScript中是可以有宏任务和微任务的，比如setTimeout回调就是一个宏任务，Promise回调就是微任务。

区别如下：
主要区别在于他们的执行方式。宏任务在单个循环周期中一次一个地堆入堆栈，但是微任务队列总是在执行后返回到事件之前清空。所以，如果你以处理条目的速度像这个队列添加条目，那么你就永远在处理微任务。只有当微任务队列为空时，事件循环才会重新渲染页面。

这一问题，每次我们去调用foo时，都会在微任务队列加上另一个foo的回调，因此事件循环没办法继续处理其他的事件了，（比如说滚动、点击事件等等），直到该队列完全清空为止。因此，不会执行渲染，会被阻止。

五、运行以下代码片段，控制台上会打印什么？

在运行for in循环时，我们首先要理解for in循环，它会遍历本身的可枚举属性和对象从原来的原型继承来的属性。可枚举属性是可以在for-in循环期间可以访问的属性。

六、xGetter会打印什么值？

首先我们可以看到var x是一个全局变量，在不是严格模式下，这个x实际直接是window对象的属性了。这段代码最重要的是理解this的指向问题了----->this始终指向的是调用方法的对象的。所以，在 foo，getX() 的情况下，this指向的是foo对象返回的就是foo中的属性x，就是20。但是在调用==xGetter()==的情况下，他是直接调用了foo的getX()，但是其中的this指向的是在 xGetter的作用域，就是指向window对象的x，也就是全局变量的x，所以值就为10。

2021前端JavaScript面试题及答案相关推荐

前端周报：最经典的26个JavaScript面试题和答案；Vue3.0
1.2018年,最经典的26个JavaScript面试题和答案根据 Stack Overflow 的 2018 年度调查,JavaScript 连续六年成为最常用的编程语言.所以我们必须面对这样的现 ...
2018最新Web前端经典面试试题及答案
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案.马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识 ...
前端开发面试题及答案整理
前端开发面试题及答案整理文章目录一些开放性题目 position的值, relative和absolute分别是相对于谁进行定位的? 如何解决跨域问题 XML和JSON的区别? 谈谈你对webpa ...
ajax小猿圈面试题,小猿圈之2019年前端JavaScript面试题（二）
小猿圈前端讲师今天继续给你总结js面试题,前面一篇文章咱们已经有一片js基础部分面试题,今天小猿圈web讲师为你讲解js前端应用设计问题,一定要好好看哦,为了能赢在其他人前面. JavaScript前 ...
2021前端react面试题汇总
2021前端react面试题汇总 React视频讲解点击学习全部视频:点击学习 (1)共同点为了解决状态管理混乱,无法有效同步的问题统一维护管理应用状态; 某一状态只有一个可信数据来源(通常命名 ...
100 道 JavaScript 面试题及答案（下）
编辑整理 | 杨小爱我们接上昨天的上篇内容<100 道 JavaScript 面试题及答案(上)>,今天我们开启下篇,把后面的50道题认真看完. 现在,我们就开始吧. 51. promi ...
2021年低压电工试题及答案及低压电工复审模拟考试
题库来源:安全生产模拟考试一点通公众号小程序 2021年低压电工试题及答案及低压电工复审模拟考试,包含低压电工试题及答案答案和解析及低压电工复审模拟考试练习.由安全生产模拟考试一点通公众号结合国家低压 ...
100道JavaScript 面试题和答案(下）
英文 | https://betterprogramming.pub/100-javascript-interview-questions-58e22e30f7f1 翻译 | 杨小二接上篇<1 ...
100 道 JavaScript 面试题及答案汇总(下）
英文 | https://betterprogramming.pub/100-javascript-interview-questions-58e22e30f7f1 翻译 | 杨小二接上篇< ...

2021前端JavaScript面试题及答案