面试季又到了后台和读者群里被问得最多的问题永远是那句JS高频面试题到底该刷哪些说实话面试题清单网上一搜一大把但真正让候选人卡住的往往不是题目本身而是不知道怎么把一个简单的知识点讲出层次感。我这些年既面试过别人也被别人面试过最大的体会是面试官最怕的不是你不会而是你只会背答案。同一个问题有人三句话讲完干巴巴有人能顺着原理讲到工程实践这就是区分度所在。这篇文章我不按八股文的路子走而是把我认为最值得反复琢磨的高频考点拆开揉碎。每个部分我会先还原面试场景再给出从入门到进阶的回答路径最后补充一些真正能体现功底的点。目标是让基础薄弱的读者能听懂原理让准备跳槽的读者知道怎么组织语言。1. 闭包与this作用域这两道题能筛掉一半候选人1.1 面试官问闭包时其实在问什么先看一道几乎必考的变形题for循环里用var声明变量setTimeout回调输出的结果是什么怎么改成预期效果这道题考的就是闭包和变量作用域。很多候选人会说因为var是函数作用域let是块级作用域这个答案对但太薄了。我面试时听到这个回答会紧接着追问那如果不用let你能用哪些方式实现预期结果这些方式各自的原理是什么这一问高下立判。实际上闭包的核心定义是函数创建时会带上它所在词法作用域的引用这个引用让函数在离开创建环境后依然能访问到当时的变量环境。用它解释那道经典题时正确的思考链路应该是这样的for (var i 0; i 5; i) { setTimeout(function() { console.log(i); // 全部输出5 }, 0); }这里var声明的i绑定在全局/函数作用域上五次循环共享同一个变量i。等到同步代码执行完、事件循环轮到回调函数时i早就自增到了5。而let是块级作用域每次循环都会创建一个全新的词法环境每个回调也各自捕获了属于自己那次循环的i所以输出0、1、2、3、4。如果继续用var来实现常见的办法是用立即执行函数IIFE来制造独立的函数作用域这恰好就是闭包最典型的应用场景。还可以用bind把值作为参数固定下来道理类似本质都是给回调函数多包一层作用域来保存当时的i。1.2 高频追问this指向从口诀到原理this的指向问题几乎是每场面试必问网上也流传着谁调用指向谁箭头函数没有this这类速记口诀。但真到了面试里光有口诀远远不够。为什么因为实际代码里经常出现调用方式和直观认知不一致的情况。我的建议是掌握一个底层判断逻辑this是函数被调用时创建的执行上下文的一部分它指向什么取决于函数的调用方式。判断顺序不外乎四步如果是箭头函数this继承自定义时外层作用域如果是函数被当作方法调用this指向调用它的对象如果是普通函数调用指向全局严格模式下是undefined如果是用了new则指向新创建的实例对象。同时bind、call、apply这三个显式指定this的方法也是必考项区别在于bind会返回一个新函数call和apply会立即执行而apply和call的区别只在于参数形式。举一个经常让人绕进去的题目var obj { name: 前端, getName: function() { console.log(this.name); } }; var fn obj.getName; fn(); // 输出什么这里如果把函数赋值给变量再调用它丢掉了obj这个调用者this就指向了全局所以输出undefined。这就是丢失this问题。面试官如果看到你能答出这一层通常会继续追问那怎么让fn执行时this依然指向obj答案是用bind绑定一次即可。1.3 闭包与this综合案例怎么答才不干瘪最常见的综合题是实现一个计数器函数每次调用返回自增的数字要求多个计数器互不干扰。这就是闭包的核心应用。参考答案思路是function createCounter() { let count 0; return function() { count 1; return count; }; } const counterA createCounter(); const counterB createCounter(); counterA(); // 1 counterA(); // 2 counterB(); // 1这道题想考查的不仅仅是闭包的语法还有封装状态的理念。答到这里可以顺带说说闭包在模块化开发里的意义用闭包在函数内部维持私有状态外部只能通过暴露的接口操作状态这不就是面向对象中私有字段的思想吗如果再联想到防抖、节流、柯里化这些面试高频手写题都是闭包的实际应用那回答的层次就完全不一样了。2. Promise与事件循环把异步编程的底牌一起摊开2.1 为什么事件循环是异步面试的入场券异步编程在JS里极其常见几乎每一面都会遇到。面试官问你setTimeout(,0)和Promise谁先执行的时候如果你直接说微任务先执行那只是一个结论说明不了你理解事件循环。我欣赏的回答是把整个流程用调用栈、微任务队列、宏任务队列三个概念讲出来同步代码在调用栈里按顺序执行遇到异步API比如setTimeout、DOM事件回调、网络请求就把对应的任务交给浏览器的对应模块处理同时继续执行后续同步代码。一旦调用栈空了事件循环开始工作先清空整个微任务队列里的所有任务然后取出宏任务队列里的第一个任务执行执行完再回到微任务队列检查是不是又有新的微任务被添加进来了。就这样一直循环。这里有一个非常关键、也容易被忽视的点页面渲染的时机通常也是在一轮宏任务结束后、下一轮宏任务开始前所以大量微任务可能阻塞渲染这就是为什么setTimeout的回调哪怕设成0也可能因为前面积压的微任务而延迟。2.2 高频输出顺序题拆开一步一步推我整理一道几乎每场面试都会出现的题候选人如果能一步步推导出来说明异步基础是真的扎实setTimeout(() console.log(A), 0); Promise.resolve().then(() { console.log(B); Promise.resolve().then(() console.log(C)); }); console.log(D);推导顺序用文字描述一遍同步代码先执行输出DPromise.then属于微任务按顺序把第一个then推入微任务队列所以接下来输出B同时B的回调内部又注册了一个新的微任务C在当前宏任务结束后微任务队列是优先被清空的所以紧接着输出C最后才是宏任务里的A。最终顺序是D、B、C、A。如果我再加一层嵌套和async/await题目会更复杂但原理不变。async函数里的await本质上可以理解为Promise.then的语法糖await后面的代码相当于在then回调里执行所以会出现await表达式后面的代码要等微任务执行后才继续的现象。我强烈建议读者自己在控制台多跑几种组合培养出一眼看清执行顺序的感觉这比背十道题答案都管用。2.3 Promise的链式调用与错误处理基本功除了顺序题Promise本身的链式调用和错误处理也几乎必考。比如当一个Promise被reject后怎么捕获then的第二个参数和catch有什么差别这个问题经常有人答错。实际上then可以接收两个函数第二个函数专门处理rejected状态而catch是then(undefined, onRejected)的语法糖。区别在于如果第一个then里抛出了异常仅靠同一个then的第二个参数是捕获不到的必须交给后面链式里的catch。这里还要注意一个点在链式调用里面某个环节发生异常之后如果后续有catch它会跳过中间的then直接进入catch而catch返回的值会被当作新Promise的resolve值继续往后传递。这个行为是Promise错误恢复机制的核心理解了它很多Promise.resolve().then().then().catch()的操作顺序题就迎刃而解。2.4 手写符合Promise A规范的简化版如果真的想让面试官眼前一亮可以在答完概念后主动提出我可以实现一个简化版Promise核心结构包括状态机、then注册、resolve和reject的触发。我之前在模拟面试中让候选人写一个基础版本不用完整通过全部Promise A测试但必须体现几个关键三种状态只能单向转换、then可以链式调用、支持微任务异步执行回调。下面给出一个能体现核心思路的骨架class MyPromise { constructor(executor) { this.status pending; this.value undefined; this.reason undefined; this.onFulfilledCallbacks []; this.onRejectedCallbacks []; const resolve (value) { if (this.status pending) { this.status fulfilled; this.value value; this.onFulfilledCallbacks.forEach(fn fn(value)); } }; const reject (reason) { if (this.status pending) { this.status rejected; this.reason reason; this.onRejectedCallbacks.forEach(fn fn(reason)); } }; try { executor(resolve, reject); } catch (e) { reject(e); } } then(onFulfilled, onRejected) { // 典型的链式调用要在这里返回新的Promise // 并把回调放入微任务队列 } }实际面试中不需要写出完整实现但把这段逻辑走通展示出你对状态管理和异步调度的理解就已经能体现高于绝大多数候选人的水平了。当然真要写完整版还需要处理值的穿透、回调的异步性、then中返回值是Promise的包裹情况。这些工程量不小建议读者抽时间完整写一遍收获极大。3. 原型链、new、继承这三块内容其实是同一个故事3.1 new到底干了什么怎么用一句话说清很多读者对new的理解停留在创建一个对象并调用构造函数。作为面试回答这个粒度太粗了。只需要四个步骤就能把它讲清楚创建一个新对象并让它的原型指向构造函数的prototype对象把这个对象作为this传入构造函数执行构造函数内部的代码如果构造函数本身有返回对象那么返回那个对象否则返回新创建的对象。把这个过程反过来想就能理解为什么构造函数里用return返回一个对象会覆盖new的结果而返回基本类型则会忽略掉。同时也自然理解了为什么instanceof能判断一个对象是不是由某个构造函数创建的它本质上检查的是原型链上存不存在对方的prototype对象。这一块还经常和class混在一起考。class只是构造函数的语法糖底层机制依然是原型链。尤其要留意class中的this绑定问题事件监听或定时器回调中使用了class方法且未绑定this很容易出现undefined这和原型链没有直接关系但经常配合this一起考值得举一反三。3.2 原型继承的常见写法以及各自的坑继承相关的问题面试频率极高。从圣杯模式时代到ES6的extends每种方案都有它的适用场景。一个实用的梳理方式是把原型链继承借用构造函数继承组合继承寄生组合继承对照着看。如果直接用原型链继承子类的原型是父类的一个实例带来的问题是父类中的引用类型属性会被所有子类实例共享修改一个实例的属性别的实例也会被影响。如果只用借用构造函数继承又没法拿到父类原型上的方法。两者结合的组合继承能解决这两个问题但会调用两次父类构造函数。最终的推荐方案是寄生组合继承用一个空函数做中间桥梁子类.prototype的原型直接指向父类.prototype然后修正子类原型的constructor指向。这段内容里有几个高频追问点constructor属性有什么用为什么commonly使用Object.create而不是直接赋prototypeES6的extends底层是怎么做的。能把这些问题串起来讲说明你是真正理解了继承而不是背了一个写法。3.3 instanceof的原理与边界条件a instanceof B在面试里也经常被当作一个判断题来问。原理很简单沿着a的原型链向上查找看是否存在B.prototype这个对象找到了返回true找不到返回false。但有几个边界值得注意基本类型在instanceof运算符里几乎都返回false除非通过Object方法包装成对象原型链被修改后结果会随之变化比如手动把obj.__proto__改成nullinstanceof结果就完全不同。有一个高手才会提到的点是instanceof默认检查Symbol.hasInstance这个方法所以理论上可以自己定义一种instanceof行为。这种冷门知识点不是必考但在候选人实力相当的时候能提出这个角度会显得基础非常扎实。3.4 深挖Object.create和空原型对象还有一个和原型链强相关的面试题Object.create(null)和{}有什么区别答案的关键在于前者没有原型链所以没有hasOwnProperty、toString这些方法也不能用instanceof判断类型。这类型的对象经常用来做纯字典映射因为不会被原型上的属性污染。很多候选人连Object.create是ES5时代实现继承的关键方法这层都不一定了解要知道在没有class的年代它就是原型式继承的主力。可以顺带聊一个常见的坑把普通对象当作Map用的时候obj[toString]可能取到的不一定是自己的属性而是原型链继承来的方法。用Object.create(null)创建的空原型对象就可以从根本上规避这类问题。能讲到这个程度面试官基本就不会再追问了。4. 手写代码题从背模板到真正理解设计意图4.1 防抖与节流设计思路比代码本身更重要手写防抖节流几乎是所有公司都会考的。有些候选人背得很熟练但当我问改一下参数说下如果需求是下拉到底部加载更多应该用哪个时就卡住了。这说明没理解设计意图只是背了代码。防抖的思路是在事件触发后设一个延迟如果延迟期内再次触发则重置计时器只有最后一次触发才会执行。适合输入框搜索、窗口大小调整这些只关心最终状态的场景。用闭包实现时要注意的是计时器变量必须放在返回函数的外部来维持状态。节流的思路是固定时间间隔内最多执行一次。适合滚动监听、鼠标移动这些需要定期执行的场景。实现方式有时间戳版和定时器版前者保证首次触发立即执行后者更侧重于保证最后一次触发也能执行。我建议读者把两者都写上几遍面试时把各自特性讲清楚比单纯写对代码加分很多。4.2 深拷贝实现边界条件决定分数高低深拷贝也是超高频手写题。最简单但容易翻车的写法是JSON.parse(JSON.stringify(obj))它能处理大部分嵌套对象但遇到函数、undefined、Symbol、循环引用、Date、RegExp都会出问题。面试里如果只给这个答案基本会被追问到还有哪些类型处理不了。真正的手写深拷贝要解决这几个核心问题如何区分数组和普通对象如何处理循环引用通常用WeakMap来记录已拷贝对象如何处理Date、RegExp、Map、Set这种特殊对象。下面给一个基础版参考function deepClone(target, map new WeakMap()) { if (typeof target ! object || target null) { return target; } if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); for (let key in target) { if (Object.prototype.hasOwnProperty.call(target, key)) { clone[key] deepClone(target[key], map); } } if (target instanceof Map) { target.forEach((value, key) clone.set(key, deepClone(value, map))); } if (target instanceof Set) { target.forEach(value clone.add(deepClone(value, map))); } return clone; }注意这里用WeakMap而不是Map是因为WeakMap的键是弱引用可以避免深拷贝过程中因为递归记录的引用关系导致原对象无法被垃圾回收这也是一个可以主动讲出来的加分点。4.3 发布订阅与EventEmitter一道可以贯穿很多知识点的题有一类手写题经常被面试官用来评估代码组织能力就是实现一个简单的EventEmitter支持on、off、emit、once。它的复杂度不高但非常能检验候选人对回调函数的理解、对闭包和this的处理能力。我建议在实现时把事件名作为key回调数组作为value存进一个对象里。emit时遍历回调数组并执行。once的特点是执行完一次之后要自动移除自身。实现方式比较简单在注册once时可以包一层函数里面执行完回调后调用off或者用{fn, isOnce}装饰器结合标记删除的方式。有几个细节容易被忽略off时如果回调数组为空了应该删除该事件名执行回调时如果回调内部又改变了回调数组遍历会出现意外行为可以考虑先拷贝一份再遍历。这套代码写下来对事件的底层理解会有很明显的提升。很多框架里的EventBus、mitt这类库本质上都是这个模式看别人的源码时也不会觉得陌生了。4.4 数组偏平化、去重、柯里化这三道小题的组合拳最后再推荐一组小而美的题目数组扁平化、数组去重、柯里化。这三道题几乎每家前端面试都会出现一到两道但它们都能延伸出好多层。比如数组扁平化可以用flat一行解也可以手动递归实现还可以用reduce实现去重可以用Set、indexOf、Map每一种适用场景不同柯里化还牵扯到Function.length、递归调用、占位符等。这些题的价值在于它们天然具备由浅入深的特性。面试官问一道题候选人可以从最简单的方式答起然后逐步优化展示出思路的层次感。我面试时最喜欢的候选人是那种会主动说这里有三种方式复杂度和适用场景分别是什么的人这比闷头把代码写完再等追问要主动得多。5. 从背答案到讲原理面试前最后几天该怎么做5.1 输出式复习法自己讲一遍胜过看十遍我一直觉得看答案和能讲出来之间隔着巨大的差距。很多候选人看解析时觉得这我会一到面试时组织语言就乱了。破解方法很简单把每道题当作一个5分钟的迷你讲解对着镜子或录音讲一遍讲完之后回听找出卡壳和含糊的地方。这个方法的本质是转教他人你会很自然地逼自己去搞清楚那些模棱两可的角落。我在读者群里推荐过一个做法把高频题目写在小卡片上每张卡只写题目和关键词不写答案。每天随机抽三张当场开始讲解。坚持两周之后表达流畅度会有一个肉眼可见的提升。5.2 准备两套答案极简版和完整版同样是闭包是什么这个问题面试官问的背景不同回答的深度也应该不同。如果是五轮面试里的第一轮可能只需要回答函数和其词法作用域的组合基本能过关。但如果是终端面试或者技术面里被深入追问就要准备完整版闭包的形成条件、内存管理问题、实际应用场景、和this的结合、在框架源码里的表现。所以我建议在备考阶段每个核心考点都准备两种答案。极简版保证一分钟内说完完整版保证能展开到三分钟以上。这样无论面试官是想快速过一遍还是想深挖到底你都有备而来。这比死记一套标准答案要灵活得多。5.3 高频题之外别忘了看边界条件最后再分享一个我个人的面试感受很多候选人能把基本功能写出来但一到边界条件就露馅。比如问数组去重基础版用Set几乎人人都能写但追问如果数组里有NaN你的去重方法还能正常工作吗很多人就答不上来了。再比如深拷贝基础版能写但扩展到Symbol、Map、Set就开始混乱。所以在备考时要刻意训练一种找反例的思维。每写完一个手写函数就问自己三个问题传空值会怎样传特殊类型会怎样传循环引用会怎样这些问题能覆盖住面试官80%以上的追问方向提前用书面方式准备好面试时就能从容得多。实际上把精力投在这些边界条件的思考上比多刷十道普通题带来的提升要大很多。