1. JavaScript面试题笔记前端工程师的进阶指南作为前端开发的核心语言JavaScript在技术面试中的权重占比常年居高不下。最近帮团队面试了二十多位候选人发现即使是工作3年以上的开发者面对一些看似基础的JS问题也常会卡壳。这份笔记整理了我作为面试官八年来最常考察的15类JavaScript问题附带高频考点解析和避坑指南。不同于网上泛滥的题库汇总这里每个问题都标注了考察意图和评分标准。比如事件循环类题目初级岗只需说出宏任务/微任务概念而高级岗必须能结合调用栈、内存管理进行系统分析。建议根据目标职级选择性重点突破。2. 核心知识体系拆解2.1 作用域与闭包for(var i0; i5; i) { setTimeout(() console.log(i), 100) } // 输出如何修正这道经典题目在2023年字节跳动校招中出现了37次。核心考察点有三个层次var的作用域提升函数级作用域事件循环导致的延迟执行闭包解决方案的多种实现高级技巧使用let的块级作用域是最佳实践但面试官可能会追问不用let如何实现此时需要用IIFE创建闭包环境for(var i0; i5; i) { (function(j){ setTimeout(() console.log(j), 100) })(i) }2.2 原型与继承美团2022年面试数据显示85%的候选人无法完整描述new操作符的执行过程。以下是我总结的黄金回答模板创建一个空对象obj将obj.__proto__指向构造函数.prototype执行构造函数并将this绑定到obj如果构造函数返回对象则作为new结果否则返回objfunction myNew(Fn, ...args) { const obj Object.create(Fn.prototype) const result Fn.apply(obj, args) return result instanceof Object ? result : obj }2.3 异步编程演进从回调地狱到Promise再到async/await这里有个容易踩的坑async function getData() { return await fetchData() // 冗余的await }性能提示当async函数直接返回Promise时不需要额外await否则会产生不必要的微任务。V8引擎团队确认这种写法会导致额外的Promise封装。3. 高频算法题型精讲3.1 手写Promise实现大厂P7级必考题需要完整实现then/catch/finally/resolve/reject。关键点在于状态机管理pending/fulfilled/rejectedthen方法的链式调用微任务队列的实现class MyPromise { constructor(executor) { this.state pending this.value undefined this.onFulfilledCallbacks [] const resolve (value) { if(this.state pending) { this.state fulfilled this.value value this.onFulfilledCallbacks.forEach(fn fn()) } } // reject实现类似... } then(onFulfilled) { return new MyPromise((resolve) { const wrappedFn () { queueMicrotask(() { try { resolve(onFulfilled(this.value)) } catch(e) { reject(e) } }) } if(this.state fulfilled) wrappedFn() else this.onFulfilledCallbacks.push(wrappedFn) }) } }3.2 函数柯里化蚂蚁金服高频题考察高阶函数应用function curry(fn) { return function curried(...args) { if(args.length fn.length) { return fn.apply(this, args) } else { return (...args2) curried.apply(this, args.concat(args2)) } } } // 使用示例 const sum (a,b,c) abc const curriedSum curry(sum) console.log(curriedSum(1)(2)(3)) // 64. 性能优化专项4.1 防抖与节流腾讯TEG团队实际案例滚动事件优化方案对比// 防抖连续触发时只执行最后一次 function debounce(fn, delay) { let timer return function() { clearTimeout(timer) timer setTimeout(() fn.apply(this, arguments), delay) } } // 节流固定时间间隔执行 function throttle(fn, interval) { let lastTime 0 return function() { const now Date.now() if(now - lastTime interval) { fn.apply(this, arguments) lastTime now } } }实战建议移动端用防抖处理resize事件用节流处理scroll事件。Chrome DevTools的Performance面板可以验证优化效果。4.2 内存泄漏排查某电商项目曾因以下问题导致页面崩溃// 错误示例 window.addEventListener(message, this.handleMessage) // 正确做法 useEffect(() { const handler (e) {...} window.addEventListener(message, handler) return () window.removeEventListener(message, handler) }, [])使用Chrome Memory面板记录堆快照对比操作前后的对象保留树可以快速定位未释放的DOM引用和事件监听器。5. 框架相关考点5.1 Virtual DOM diff策略React和Vue的diff算法差异常被拿来对比React的Fiber架构采用链表遍历优先级调度Vue3的静态标记动态追踪使diff效率提升30%关键优化点key的使用要避免index而用唯一ID5.2 响应式原理实现// 简易响应式实现 function defineReactive(obj, key) { let value obj[key] const deps new Set() Object.defineProperty(obj, key, { get() { if(currentWatcher) deps.add(currentWatcher) return value }, set(newVal) { value newVal deps.forEach(watcher watcher.update()) } }) }6. 刁钻题型应对策略6.1 隐式类型转换[] {} // [object Object] {} [] // 0这种题目考察对规范的理解。记住三个关键规则对象转原始值优先调用valueOf()加法运算优先字符串连接语句开头的大括号会被解析为代码块6.2 作用域陷阱var a 10 function foo() { console.log(a) var a 20 } foo() // 输出变量提升导致的TDZ暂时性死区现象实际执行顺序相当于var a a 10 function foo() { var a console.log(a) // undefined a 20 }7. 面试实战技巧白板编码时先口述思路遇到问题主动沟通对于开放性问题采用STAR法则回答被问到时不懂的知识点诚实承认但展示学习能力最后提问环节要准备有深度的问题如团队技术规划最近帮候选人模拟面试时发现能清晰解释Event Loop执行顺序的开发者通过率比单纯背题的高出40%。建议用Chrome的Performance面板实际观察微任务/宏任务执行时序这比死记概念有效得多。