1. 先聊清楚为什么面试官总盯着JS八股文不放前端面试聊到JS很多人第一反应是“又要背八股文了”。但你要真做过几场面试就会发现面试官问来问去就那几个考点不是因为题库偷懒而是因为这几个点背后藏着一个前端工程师能不能真正写好代码的分水岭。先把话说透我参加过大大小小不下三十场前端面试也坐在桌子对面当过面试官。作为被面试者的时候我也烦过“闭包是什么”这种问题心想我项目都上线了你还问我闭包后来自己开始面别人才明白一个道理——八股文考察的不是你背没背过定义而是你有没有真正理解JS这门语言的运行机制。一个能把闭包、this、原型链讲清楚的人写出来的代码大概率不会烂到哪去反之就算项目经验写满一页纸一问到底层就支支吾吾基本也能判断出他的项目参与深度。这个系列就是干这个用的。我会把前端面试里JS方向最高频的考点掰开揉碎讲一遍。每一篇聚焦一个主题从考点是什么、为什么考、怎么答不丢分到面试官可能会怎么追问一次讲透。这是系列第一篇先把最基础也最重要的几个硬骨头啃下来数据类型、作用域与闭包、this指向、原型与原型链。这四个东西是JS的骨架也是面试出现频率最高的四个方向。后面再聊异步、事件循环、Promise、数组方法这些你会发现都是建立在这套骨架之上的。2. 数据类型与类型判断面试第一个必问题2.1 基本类型和引用类型到底差在哪面试官开场十有八九会问“JS的数据类型有哪些”这个问题看着简单但很多人一紧张就答不全。完整答案分两部分基本类型Primitive Types和引用类型Reference Types。基本类型包括string、number、boolean、null、undefined、symbolES6新增、bigintES2020新增。引用类型就一个object但它涵盖很广数组、函数、正则、日期甚至Map、Set底层都是object。这里有个特别容易踩坑的点很多人会下意识把function当成引用类型单独列出来。严格来说function是object的一种特殊子类型但在日常开发中我们都会把它单独拎出来说因为函数在JS里的地位太特殊了后面讲原型链的时候你会看到function身上还有prototype属性这是其他对象没有的。基本类型和引用类型最核心的区别在于存储方式。基本类型的数据直接存在栈内存里变量拿到的是值本身引用类型的数据存在堆内存里变量拿到的是指向堆内存的地址。这个区别直接决定了赋值行为的不同。// 基本类型赋值互不影响 let a 10 let b a b 20 console.log(a) // 10 // 引用类型赋值共享同一个对象 let obj1 { name: 张三 } let obj2 obj1 obj2.name 李四 console.log(obj1.name) // 李四这个例子面试官几乎必问而且经常跟“深拷贝和浅拷贝”联系到一起。因为引用类型赋值只拷贝了地址所以两个变量指向同一个对象改其中一个另一个跟着变。要想真正复制一份互不影响的对象就得做深拷贝比如JSON.parse(JSON.stringify(obj))或者用structuredClone。但要注意JSON序列化的方案有局限函数、undefined、Symbol、循环引用都会丢正则和Date也会退化成普通对象实际开发中还是要用专门的库或者递归去处理。2.2 typeof 和 instanceof各有什么坑判断数据类型有两个工具typeof和instanceof。它们各有一堆坑面试官很喜欢拿这些坑做文章。typeof最经典的坑有两个。第一个typeof null返回object这是JS从诞生起就存在的bug因为当初设计时null的机器码是000开头和对象的类型标签碰巧一致这个bug因为兼容性问题一直没修。第二个typeof对函数返回function但对数组、日期这些返回的都是object所以你没法用typeof区分数组和普通对象。那怎么判断一个值是不是数组用Array.isArray()这个方法最可靠。判断null呢最稳妥的方式是Object.prototype.toString.call(value)返回[object Null]这个方法几乎可以精确判断任何内置类型面试时把这个拿出来说是很加分的。instanceof的原理是检查构造函数的prototype属性是否出现在对象的原型链上。它有明显的局限性只能用来判断引用类型基本类型判断不了而且原型链可以被修改所以结果不一定可靠。举个面试常见的例子[] instanceof Object // true因为数组的原型链上能找到Object.prototype [] instanceof Array // true instanceof String // false因为字符串是基本类型这里有个更隐蔽的点instanceof在跨iframe时会失效因为不同iframe的Array构造函数不是同一个。所以在真实开发中判断跨环境对象类型时用Object.prototype.toString更保险。2.3 类型转换的隐藏规则答好了很出彩类型转换是面试里出题率极高的点尤其是和的区别以及的隐式转换规则。先说结论比较值和类型类型不同直接返回false会做隐式转换再比较。具体转换规则建议你背下来真的有用null undefined返回true但null undefined返回false比较string和number时字符串会转成数字再比较一边是boolean时布尔值会先转成数字true为1false为0再比较一边是object另一边是string或number时对象通过valueOf()或toString()转成基本类型再比较5 5 // true字符串转数字 0 false // truefalse转数字0 null 0 // false注意null不会转成0 [] // true空数组toString()得到空字符串面试官特别喜欢问[] ![]的结果。这个题看着唬人拆开就简单了![]先算空数组是truthy值取反后是false。然后比较[] false布尔值转数字得[] 0空数组toString()为空字符串空字符串转数字是0所以最终结果是true。一步推下来逻辑非常清晰。我个人建议日常写代码永远用只在判断null undefined这种场景下用别的能避就避。但面试考这个考的就是你对隐式转换规则的理解所以规则得背熟推导过程要能流利说出来。3. 作用域、执行上下文与闭包面试高产区3.1 变量提升背后的执行上下文机制作用域是JS面试绕不开的话题。先说一个最简单但很多人说不清楚的概念作用域就是变量和函数的可访问范围。ES6之前JS只有全局作用域和函数作用域ES6引入了块级作用域let和const声明的变量只在所在的块{}内有效。跟作用域紧密相关的是执行上下文Execution Context。JS代码执行前引擎会先做“准备工作”把变量和函数声明登记到当前上下文里这个过程叫变量提升Hoisting。var声明的变量会被提升到作用域顶部初始值为undefined函数声明会被整体提升所以你在声明之前调用函数也能正常执行。但let和const不会提升初始化它们存在“暂时性死区”TDZ在声明前访问会报ReferenceError。console.log(a) // undefinedvar提升但没赋值 var a 1 console.log(b) // ReferenceError: Cannot access b before initialization let b 2这里面试官喜欢追问“var提升的是声明还是赋值”答案是只提升声明不提升赋值。赋值还是在原位置执行。理解了这一点再看一个经典陷阱for (var i 0; i 3; i) { setTimeout(() console.log(i)) } // 输出 3 3 3因为var没有块级作用域i是全局的循环结束后i已经是3 for (let i 0; i 3; i) { setTimeout(() console.log(i)) } // 输出 0 1 2因为let每次循环都创建新的块级作用域这个例子几乎每次面试都会出现它考察的点是作用域机制的理解、var和let的区别、以及闭包与异步的组合。答好的关键是说清楚let每次迭代都会绑定一个新的i每个回调函数捕获的是自己所在作用域的那一个i。3.2 闭包定义、原理和应用场景闭包是前端面试“逢面必问”的考点也是很多人背了定义但还是写不对的知识点。先给一个准确的描述闭包就是函数与其词法作用域的“绑定”。当一个函数引用了它所在作用域之外的变量并且这个函数在外部被调用就形成了闭包。更通俗地说闭包让你可以在函数外部访问函数内部的变量即使这个函数已经执行完毕。原理是什么呢JS引擎在函数创建时会把当前作用链保存下来函数执行时通过这条作用域链查找变量。正常情况下函数执行完局部变量就该被垃圾回收了但如果有闭包引用着这个变量引擎就不会回收它而是让它一直存活。function createCounter() { let count 0 return function() { count return count } } const counter createCounter() console.log(counter()) // 1 console.log(counter()) // 2 // count不会被回收因为返回的函数还在引用它面试中关于闭包的高频问题有三个第一闭包解决了什么问题、有什么用。常见应用场景包括创建私有变量模块模式、实现函数柯里化、在循环中保存变量状态、React Hooks中用闭包保存状态。本质上闭包给JS提供了“变量封装”的能力。第二闭包可能带来什么问题。答案很明确内存泄漏风险。闭包让变量长期驻留内存如果创建了大量闭包或者闭包引用了大型对象可能导致内存占用过高。实际开发中要注意不再需要的闭包要把引用置为null方便垃圾回收。第三闭包与垃圾回收的关系。这里可以多说一句现代V8引擎对闭包做了优化如果闭包只使用了外层函数的一部分变量那只有被用到的变量才会被保留其余变量正常回收。这个细节面试时提出来会让面试官觉得你真的研究过原理。3.3 this指向问题四条绑定规则与常见误区this的指向问题堪称JS面试的“翻车重灾区”几乎所有面试题里都有一道this输出的陷阱题。要彻底搞定this记住四条绑定规则按优先级排序优先级从高到低分别是new绑定、显式绑定call/apply/bind、隐式绑定对象方法调用、默认绑定独立函数调用。默认绑定直接调用函数this指向全局对象浏览器里是windowNode环境是global。严格模式下指向undefined。这个细节经常被抠答“严格模式下是undefined”会加分。隐式绑定函数作为对象的方法调用时this指向那个对象。但你得小心“拔掉”方法再调用this就丢了const obj { name: obj, getName() { console.log(this.name) } } const fn obj.getName fn() // 输出什么取决于调用环境浏览器非严格模式下是window.name显式绑定call、apply、bind可以强制指定this。三者的区别是call和apply会立即执行函数传参方式不同bind返回一个新函数不立即执行。new绑定用new调用构造函数时this指向新创建的对象。这个放到后面原型链部分再展开。另外还有一个重要的点箭头函数没有自己的this。它的this是词法继承的也就是定义箭头函数时外层作用域的this。这一特性让箭头函数在回调场景里特别好用但也意味着你没法用call/apply/bind改变它的this。经典面试题来一道var name 全局 const obj { name: 对象, getName: function() { return function() { return this.name } } } console.log(obj.getName()()) // ?答案是全局。因为obj.getName()执行后返回一个普通函数这个函数被独立调用了this走默认绑定指向全局。如果改成箭头函数结果就是对象因为箭头函数继承外层this。跟this一起考的还有一道经典输出题const obj { name: obj, getName() { console.log(this.name) }, getArrow: () { console.log(this.name) } } obj.getName() // obj obj.getArrow() // 全局name箭头函数定义时外层this是全局很多人在第二行翻车。记住对象字面量不能形成作用域箭头函数定义时this捕获的是它外部最近一层的this也就是全局this。4. 原型、原型链与继承把JS面向对象讲明白4.1 构造函数、原型对象与实例之间的三角关系原型链是前端面试里公认的“劝退知识点”概念抽象、关系绕但一旦理解透了你会觉得整个JS的对象体系都清晰了。先理清三个角色构造函数Constructor、原型对象Prototype、实例Instance。它们的关系可以概括成三句话构造函数通过new创建实例构造函数有一个prototype属性指向原型对象实例有一个__proto__属性标准中叫[[Prototype]]也指向同一个原型对象function Person(name) { this.name name } Person.prototype.sayHi function() { console.log(Hi, Im ${this.name}) } const p new Person(张三) console.log(p.__proto__ Person.prototype) // true console.log(Person.prototype.constructor Person) // true这里有几个细节值得记住Person.prototype是一个对象它自带一个constructor属性指回构造函数本身。实例的__proto__和构造函数的prototype指向同一个对象所以实例能访问到原型上定义的方法。这也是为什么p.sayHi()能调用的原因实例自身没有sayHi但引擎会沿着__proto__链往上找。面试官如果问“__proto__和prototype有什么区别”标准答案是__proto__是每个对象都有的属性指向它的原型prototype是函数特有的属性指向一个对象。对象通过__proto__实现原型链查找函数通过prototype提供给实例共享方法和属性。注意现在更推荐用Object.getPrototypeOf(obj)来获取原型而不是直接访问__proto__因为后者是非标准属性。4.2 new运算符到底做了什么new运算符是理解原型链的关键一环。面试官问“new做了什么”本质上是考察你对对象创建全流程的理解。new一个构造函数时引擎内部做了四件事创建一个全新的空对象把这个空对象的__proto__指向构造函数的prototype将构造函数的this绑定到这个新对象上并执行构造函数代码为对象添加属性如果构造函数显式返回一个对象则返回那个对象否则返回新创建的对象第四步是很多人的知识盲区。如果构造函数返回的是基本类型或没写returnnew会忽略它返回新对象但如果返回的是对象返回值会覆盖新对象。function Foo() { this.name foo return { custom: true } } const f new Foo() console.log(f.name) // undefined console.log(f.custom) // true这个例子面试中偶尔出现答好它会让面试官觉得你连new的返回值机制都清楚。手动实现一个myNew是经典的手写题这里给你个参考答案function myNew(Constructor, ...args) { // 创建新对象并链接原型 const obj Object.create(Constructor.prototype) // 执行构造函数绑定this const result Constructor.apply(obj, args) // 如果构造函数返回了对象返回该对象否则返回新对象 return (typeof result object result ! null) || typeof result function ? result : obj }4.3 原型链查找机制与继承方案原型链的查找机制其实很朴素当访问一个对象的属性或方法时JS引擎先看对象自身有没有没有就去__proto__指向的原型对象上找还没有就继续往上沿着原型链一路找到Object.prototype最终如果还没找到返回undefined。const arr [1, 2, 3] // arr - Array.prototype - Object.prototype - null console.log(arr.map) // 来自Array.prototype console.log(arr.toString) // 来自Object.prototype所以继承的本质就是让子类的原型对象指向父类的一个实例这样子类实例就能顺着原型链访问到父类原型上的方法。常见的继承方式有几种面试至少要知道两种组合继承和寄生组合继承。组合继承是“构造函数继承属性 原型继承方法”的结合function Animal(name) { this.name name } Animal.prototype.speak function() { console.log(${this.name} makes a sound) } function Dog(name, breed) { Animal.call(this, name) // 继承属性 this.breed breed } Dog.prototype Object.create(Animal.prototype) // 继承方法 Dog.prototype.constructor Dog寄生组合继承是目前最推荐的方案用Object.create创建一个以父类原型为原型的对象赋给子类原型避免了父类构造函数被调用两次的问题。ES6的class本质上是寄生组合继承的语法糖所以当面试官问“class的继承原理是什么”你可以直接说“底层还是原型链那一套”。面试中还常问“如何判断一个属性是实例自身的还是原型上的”答案是hasOwnProperty。in操作符会同时检查自身和原型链hasOwnProperty只检查自身这也是区分这两个工具的核心点。5. 异步编程与事件循环面试压轴题5.1 回调、Promise与async/await的演进逻辑JS是单线程语言但异步编程是它的灵魂。面试官问你“为什么要用Promise”你得从回调地狱讲起。早期的JS只能用回调函数处理异步。回调的问题是“回调地狱”多层嵌套导致代码缩进越来越深可读性极差而且错误处理非常痛苦每个回调都要手动判断错误很容易漏。Promise的出现解决了两个核心问题一是解决了嵌套回调的书写问题把异步流程变成链式调用二是提供了统一的状态管理。Promise有三种状态pending进行中、fulfilled已成功、rejected已失败。状态一旦从pending变成fulfilled或rejected就不可再变。function fetchData(url) { return new Promise((resolve, reject) { setTimeout(() { if (url) { resolve(数据: url) } else { reject(URL不能为空) } }, 1000) }) } fetchData(/api/user) .then(res console.log(res)) .catch(err console.error(err))async/await是建立在Promise之上的语法糖让异步代码看起来像同步代码可读性大幅提升。注意await只能在async函数中使用而且async函数一定返回一个Promise。面试中常问“async/await和Promise的区别”。核心区别有两点写法上await让代码扁平化不再需要大段的.then链错误处理上async/await可以用try...catch处理和同步代码的错误处理方式一致但这也会导致一种常见错误用try...catch包住整个业务逻辑反而比.catch更容易遗漏错误。我个人建议在复杂链路中用async/await在简单单步操作中直接用Promise链就好。5.2 宏任务与微任务事件循环的执行顺序事件循环Event Loop是JS面试的高频难题也是最容易区分“背过答案”和“真懂原理”的考点。先建立模型JS引擎执行代码时遇到调用栈为空就取任务执行。任务分两类宏任务MacroTask和微任务MicroTask。宏任务包括整体脚本代码、setTimeout、setInterval、I/O操作、UI渲染微任务包括Promise.then、MutationObserver、queueMicrotask、async函数中await之后的代码。执行顺序可以概括为执行一个宏任务最开始是整个脚本执行过程中遇到微任务放到微任务队列当前宏任务执行完清空所有微任务队列执行下一个宏任务循环往复这个顺序有个关键点微任务队列必须在下一个宏任务之前全部清空。所以Promise.resolve().then(...)里的回调一定会比setTimeout里的先执行哪怕setTimeout设置的延迟是0。来看一道经典面试题console.log(script start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve() .then(() { console.log(promise1) }) .then(() { console.log(promise2) }) console.log(script end) // 输出顺序 // script start // script end // promise1 // promise2 // setTimeout第一次输出没有promise1在执行栈里因为它被放进了微任务队列。script start和script end走的是同步代码promise1和promise2是微任务在脚本宏任务结束前被清空最后才轮到setTimeout这个宏任务。把这个流程讲清楚面试官基本就能确认你会事件循环。再升级一点async/await也有微任务的参与。await后面的代码会被推迟到微任务队列中执行本质是Promise的语法糖async function test() { console.log(1) await Promise.resolve() console.log(2) } test() console.log(3) // 输出1, 3, 2这里await让console.log(2)变成了微任务所以在console.log(3)之后执行。遇到这种题先把同步代码跑完再按微任务、宏任务的顺序输出基本不会错。5.3 Promise方法的巨坑与高频手写题面试中Promise相关的题除了问原理还特别喜欢让你对比几个静态方法all、allSettled、race、any。Promise.all等待所有Promise成功只要有一个失败就整体失败返回失败的原因。Promise.allSettled等待所有Promise执行完不管成功失败返回每个任务的结果数组。Promise.race谁先完成就用谁的结果不管成功还是失败。Promise.any谁先成功就采用谁全部失败才走失败的逻辑。它们的使用场景很清晰并发请求多个接口都成功才继续用all批量请求不关心个别失败用allSettled带超时控制用race多个镜像地址取最快可用的用any。面试中能把使用场景说清楚比背方法的定义要加分得多。手写题方面Promise.all是最高频的function myAll(promises) { return new Promise((resolve, reject) { const results [] let count 0 if (promises.length 0) { resolve([]) return } promises.forEach((promise, index) { Promise.resolve(promise) .then(value { results[index] value count if (count promises.length) { resolve(results) } }) .catch(reject) }) }) }注意几个细节入参可能是非Promise值所以要Promise.resolve包一层结果顺序要和入参顺序一致所以用索引存储只要有一个失败就整体reject所以catch直接调用reject。这些细节如果不写出来手写题大概率扣分。6. 数组与字符串高频API小知识点大分差6.1 map、filter、reduce、forEach别再搞混了数组方法是JS面试的“送分题”但也是“扣分题”。送分是因为只要用过都能答两句扣分是因为很多人对它们的重要区别说不清楚map、filter、reduce、forEach的返回值、副作用、是否可以链式调用。forEach只遍历数组没有返回值不能链式调用。map遍历数组并返回一个新数组长度和原数组一致回调里返回什么新数组对应位置就是什么。filter返回一个新数组但只保留回调返回true的元素长度可能比原数组短。reduce把整个数组“归并”成一个值适合求和、计数、扁平化等场景。const nums [1, 2, 3, 4] const doubled nums.map(n n * 2) // [2, 4, 6, 8] const evens nums.filter(n n % 2 0) // [2, 4] const sum nums.reduce((acc, n) acc n, 0) // 10面试中常见的追问是“map和forEach能相互替换吗”答案是不能因为它们语义不同。用map是为了拿到新数组用它本身的返回值是核心目的用forEach只是为了执行副作用。如果在forEach里手动push到新数组代码能跑但语义是错的面试官会扣分。另一个高频考点是“数组去重”。手写去重有几种经典方案// 方案一Set最简洁 const unique [...new Set(nums)] // 方案二filter indexOf const unique2 nums.filter((n, index) nums.indexOf(n) index) // 方案三reduce const unique3 nums.reduce((acc, n) { if (!acc.includes(n)) acc.push(n) return acc }, [])面试时优先说Set方案简洁高效但也要能说出filter indexOf的原理面试官喜欢追问“为什么indexOf(n) index就能去重”因为indexOf返回的是元素第一次出现的位置只有第一次出现时这个位置才等于当前索引。6.2 字符串方法高频考点字符串也有几个高频考点第一个就是标题热词里的“判断字符串是否包含子串”。方法有四个includes返回布尔值推荐、indexOf返回索引找不到返回-1、startsWith、endsWith判断前缀后缀。const str hello world str.includes(world) // true str.indexOf(world) // 6 str.startsWith(hello) // true str.endsWith(world) // true第二个高频考点是“时间戳转格式化的时间字符串”。这个几乎每家公司的面试都有考察点是你知不知道怎么补零、怎么拼接。一个简洁的写法function formatTime(timestamp) { const date new Date(timestamp) const pad n String(n).padStart(2, 0) return ${date.getFullYear()}-${pad(date.getMonth() 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} } console.log(formatTime(Date.now())) // 2026-03-15 14:30:45这里注意getMonth()返回的月份是从0开始的所以一定要加1。这个细节是这道题的核心考点。第三个高频点是replace方法。replace接受字符串或正则作为第一个参数接受字符串或函数作为第二个参数。正则配合分组替换是常考的点const phone 13800138000 const masked phone.replace(/(\d{3})\d{4}(\d{4})/, $1****$2) // 138****80006.3 扩展运算符与常用遍历技巧热词里提到“扩展运算符把一个数组的值添加到另一个数组”这个操作在面试里也出现过但更常出现在实际开发中。写法很简单const arr1 [1, 2] const arr2 [3, 4] const merged [...arr1, ...arr2] // [1, 2, 3, 4]扩展运算符的适用场景很多数组合并、对象浅拷贝{...obj}、函数传参fn(...args)、类数组转数组[...arguments]。面试中问“浅拷贝有哪些方式”Object.assign、扩展运算符、Array.prototype.slice都是选项但要记得提一句它们都是浅拷贝。还有一个高频手写题是“函数柯里化”它也会用到reduce和args收集function curry(fn, ...args) { if (args.length fn.length) { return fn(...args) } return (...nextArgs) curry(fn, ...args, ...nextArgs) } function add(a, b, c) { return a b c } const curriedAdd curry(add) console.log(curriedAdd(1)(2)(3)) // 67. 面试实战常见问题与避坑速查表7.1 高频易错题清单这部分我把面试中出现的典型问题和易错点整理成一张速查表方便你考前快速过一遍。问题易错点标准回答要点typeof null的结果容易答成null返回object历史遗留buglet和var的区别只说“一个能重复声明一个不能”作用域、变量提升、暂时性死区、全局属性闭包是什么背定义但说不清原理函数词法作用域绑定外层变量不释放箭头函数的this以为指向调用方没有自己的this词法继承外层thisnew做了什么答不全四步建对象、连原型、绑this、返回判断微任务宏任务顺序输出题顺序错乱先同步再微任务再宏任务Promise.all和allSettled区别只记得allall一失败全失败allSettled等全部返回结果map和forEach区别混用map有返回值可链式forEach只执行副作用7.2 面试答题的节奏和话术技术面试不仅是答知识点还要答出“结构感”。我面试过很多人同样一个问题有的人答得零零散散有的人答得条理清晰印象分差距很大。给你一个通用的答题框架先说结论再解释原理最后给例子或补充注意点。以“什么是闭包”为例你可以这么答“闭包是指函数与其词法作用域的绑定关系。JS引擎在函数定义时保存作用域链函数执行时通过它查找变量如果一个内部函数引用了外部函数的变量即使外部函数执行完了内部函数依然持有该变量的引用这就是闭包。它的典型应用是创建私有变量和实现模块化但要注意它可能导致变量无法被垃圾回收有内存泄漏的风险。”这段回答包含了定义、原理、应用、风险四个层次面试官听完基本会满意。另一个重要的技巧是如果某个知识点没把握不要装懂。面试官追问两三轮就知道你有没有深入理解。我的建议是宁可诚实地回答“这块我只了解基础具体实现细节不是很确定”也不要临场硬编。面试官也是工程师你编的答案他大概率能听出来而且印象更差。7.3 常见坑与应对策略踩过的坑比成功的经验更值钱。我整理几个面试中特别常见、但很多人容易弄混的点。和区分不清每次做比较都用但面试中要能答出的转换规则尤其是null undefined为真、null 0为假这两条。数组遍历用错方法map和forEach混用是面试中最常见的扣分点。记住需要返回值用map不需要返回值用forEach。手写题漏掉边界条件比如手写Promise.all时不考虑空数组手写数组去重不考虑NaN。这些边界条件往往是加分的机关哪怕你主流程写完了漏了边界条件分数也会打折扣。this指向混乱解决这个问题的关键不是背规则而是练习从“调用位置”推断this。面试遇到this题先看函数是如何被调用的再套绑定规则层层推进。8. 一些想跟你说的经验这个系列第一篇就到这里。写的时候我一直在想到底什么才叫“会八股文”。后来我想明白了背下来的八股文是死的理解后的八股文是活的。同样一个闭包背定义的人只能说出“函数返回函数”理解原理的人能说清楚作用域链的保存机制、垃圾回收的影响、在框架里的应用场景。面试官想要的是后者。我自己准备面试的时候有个习惯屡试不爽每个考点都尝试用自己的话讲一遍假装对面坐着一个人我在给他解释。如果讲到某个地方卡住了或者发现需要靠死记才能说下去说明这块还没真正吃透回去再啃一遍源码或者再写一个demo。这个方法比刷十道题都有用。接下来这个系列会继续聊Promise源码实现、事件循环的进阶题、数组手写题大全、ES6新特性、模块化机制这些硬核内容。你可以关注后续文章也可以直接把这篇里提到的知识点先在本地跑一遍尤其是事件循环输出题和手写题动手敲过一次比盯着屏幕看十遍都记得牢。最后分享一个实操小技巧面试前把本文的速查表打印出来或者存成手机备忘录前一晚过一遍第二天进面试间前再看一眼。不用背新东西就把“易错点”和“标准回答要点”扫一遍足够帮你避开80%的常见坑。祝面试顺利。
前端面试JavaScript核心考点：闭包、原型链与事件循环全解析
1. 先聊清楚为什么面试官总盯着JS八股文不放前端面试聊到JS很多人第一反应是“又要背八股文了”。但你要真做过几场面试就会发现面试官问来问去就那几个考点不是因为题库偷懒而是因为这几个点背后藏着一个前端工程师能不能真正写好代码的分水岭。先把话说透我参加过大大小小不下三十场前端面试也坐在桌子对面当过面试官。作为被面试者的时候我也烦过“闭包是什么”这种问题心想我项目都上线了你还问我闭包后来自己开始面别人才明白一个道理——八股文考察的不是你背没背过定义而是你有没有真正理解JS这门语言的运行机制。一个能把闭包、this、原型链讲清楚的人写出来的代码大概率不会烂到哪去反之就算项目经验写满一页纸一问到底层就支支吾吾基本也能判断出他的项目参与深度。这个系列就是干这个用的。我会把前端面试里JS方向最高频的考点掰开揉碎讲一遍。每一篇聚焦一个主题从考点是什么、为什么考、怎么答不丢分到面试官可能会怎么追问一次讲透。这是系列第一篇先把最基础也最重要的几个硬骨头啃下来数据类型、作用域与闭包、this指向、原型与原型链。这四个东西是JS的骨架也是面试出现频率最高的四个方向。后面再聊异步、事件循环、Promise、数组方法这些你会发现都是建立在这套骨架之上的。2. 数据类型与类型判断面试第一个必问题2.1 基本类型和引用类型到底差在哪面试官开场十有八九会问“JS的数据类型有哪些”这个问题看着简单但很多人一紧张就答不全。完整答案分两部分基本类型Primitive Types和引用类型Reference Types。基本类型包括string、number、boolean、null、undefined、symbolES6新增、bigintES2020新增。引用类型就一个object但它涵盖很广数组、函数、正则、日期甚至Map、Set底层都是object。这里有个特别容易踩坑的点很多人会下意识把function当成引用类型单独列出来。严格来说function是object的一种特殊子类型但在日常开发中我们都会把它单独拎出来说因为函数在JS里的地位太特殊了后面讲原型链的时候你会看到function身上还有prototype属性这是其他对象没有的。基本类型和引用类型最核心的区别在于存储方式。基本类型的数据直接存在栈内存里变量拿到的是值本身引用类型的数据存在堆内存里变量拿到的是指向堆内存的地址。这个区别直接决定了赋值行为的不同。// 基本类型赋值互不影响 let a 10 let b a b 20 console.log(a) // 10 // 引用类型赋值共享同一个对象 let obj1 { name: 张三 } let obj2 obj1 obj2.name 李四 console.log(obj1.name) // 李四这个例子面试官几乎必问而且经常跟“深拷贝和浅拷贝”联系到一起。因为引用类型赋值只拷贝了地址所以两个变量指向同一个对象改其中一个另一个跟着变。要想真正复制一份互不影响的对象就得做深拷贝比如JSON.parse(JSON.stringify(obj))或者用structuredClone。但要注意JSON序列化的方案有局限函数、undefined、Symbol、循环引用都会丢正则和Date也会退化成普通对象实际开发中还是要用专门的库或者递归去处理。2.2 typeof 和 instanceof各有什么坑判断数据类型有两个工具typeof和instanceof。它们各有一堆坑面试官很喜欢拿这些坑做文章。typeof最经典的坑有两个。第一个typeof null返回object这是JS从诞生起就存在的bug因为当初设计时null的机器码是000开头和对象的类型标签碰巧一致这个bug因为兼容性问题一直没修。第二个typeof对函数返回function但对数组、日期这些返回的都是object所以你没法用typeof区分数组和普通对象。那怎么判断一个值是不是数组用Array.isArray()这个方法最可靠。判断null呢最稳妥的方式是Object.prototype.toString.call(value)返回[object Null]这个方法几乎可以精确判断任何内置类型面试时把这个拿出来说是很加分的。instanceof的原理是检查构造函数的prototype属性是否出现在对象的原型链上。它有明显的局限性只能用来判断引用类型基本类型判断不了而且原型链可以被修改所以结果不一定可靠。举个面试常见的例子[] instanceof Object // true因为数组的原型链上能找到Object.prototype [] instanceof Array // true instanceof String // false因为字符串是基本类型这里有个更隐蔽的点instanceof在跨iframe时会失效因为不同iframe的Array构造函数不是同一个。所以在真实开发中判断跨环境对象类型时用Object.prototype.toString更保险。2.3 类型转换的隐藏规则答好了很出彩类型转换是面试里出题率极高的点尤其是和的区别以及的隐式转换规则。先说结论比较值和类型类型不同直接返回false会做隐式转换再比较。具体转换规则建议你背下来真的有用null undefined返回true但null undefined返回false比较string和number时字符串会转成数字再比较一边是boolean时布尔值会先转成数字true为1false为0再比较一边是object另一边是string或number时对象通过valueOf()或toString()转成基本类型再比较5 5 // true字符串转数字 0 false // truefalse转数字0 null 0 // false注意null不会转成0 [] // true空数组toString()得到空字符串面试官特别喜欢问[] ![]的结果。这个题看着唬人拆开就简单了![]先算空数组是truthy值取反后是false。然后比较[] false布尔值转数字得[] 0空数组toString()为空字符串空字符串转数字是0所以最终结果是true。一步推下来逻辑非常清晰。我个人建议日常写代码永远用只在判断null undefined这种场景下用别的能避就避。但面试考这个考的就是你对隐式转换规则的理解所以规则得背熟推导过程要能流利说出来。3. 作用域、执行上下文与闭包面试高产区3.1 变量提升背后的执行上下文机制作用域是JS面试绕不开的话题。先说一个最简单但很多人说不清楚的概念作用域就是变量和函数的可访问范围。ES6之前JS只有全局作用域和函数作用域ES6引入了块级作用域let和const声明的变量只在所在的块{}内有效。跟作用域紧密相关的是执行上下文Execution Context。JS代码执行前引擎会先做“准备工作”把变量和函数声明登记到当前上下文里这个过程叫变量提升Hoisting。var声明的变量会被提升到作用域顶部初始值为undefined函数声明会被整体提升所以你在声明之前调用函数也能正常执行。但let和const不会提升初始化它们存在“暂时性死区”TDZ在声明前访问会报ReferenceError。console.log(a) // undefinedvar提升但没赋值 var a 1 console.log(b) // ReferenceError: Cannot access b before initialization let b 2这里面试官喜欢追问“var提升的是声明还是赋值”答案是只提升声明不提升赋值。赋值还是在原位置执行。理解了这一点再看一个经典陷阱for (var i 0; i 3; i) { setTimeout(() console.log(i)) } // 输出 3 3 3因为var没有块级作用域i是全局的循环结束后i已经是3 for (let i 0; i 3; i) { setTimeout(() console.log(i)) } // 输出 0 1 2因为let每次循环都创建新的块级作用域这个例子几乎每次面试都会出现它考察的点是作用域机制的理解、var和let的区别、以及闭包与异步的组合。答好的关键是说清楚let每次迭代都会绑定一个新的i每个回调函数捕获的是自己所在作用域的那一个i。3.2 闭包定义、原理和应用场景闭包是前端面试“逢面必问”的考点也是很多人背了定义但还是写不对的知识点。先给一个准确的描述闭包就是函数与其词法作用域的“绑定”。当一个函数引用了它所在作用域之外的变量并且这个函数在外部被调用就形成了闭包。更通俗地说闭包让你可以在函数外部访问函数内部的变量即使这个函数已经执行完毕。原理是什么呢JS引擎在函数创建时会把当前作用链保存下来函数执行时通过这条作用域链查找变量。正常情况下函数执行完局部变量就该被垃圾回收了但如果有闭包引用着这个变量引擎就不会回收它而是让它一直存活。function createCounter() { let count 0 return function() { count return count } } const counter createCounter() console.log(counter()) // 1 console.log(counter()) // 2 // count不会被回收因为返回的函数还在引用它面试中关于闭包的高频问题有三个第一闭包解决了什么问题、有什么用。常见应用场景包括创建私有变量模块模式、实现函数柯里化、在循环中保存变量状态、React Hooks中用闭包保存状态。本质上闭包给JS提供了“变量封装”的能力。第二闭包可能带来什么问题。答案很明确内存泄漏风险。闭包让变量长期驻留内存如果创建了大量闭包或者闭包引用了大型对象可能导致内存占用过高。实际开发中要注意不再需要的闭包要把引用置为null方便垃圾回收。第三闭包与垃圾回收的关系。这里可以多说一句现代V8引擎对闭包做了优化如果闭包只使用了外层函数的一部分变量那只有被用到的变量才会被保留其余变量正常回收。这个细节面试时提出来会让面试官觉得你真的研究过原理。3.3 this指向问题四条绑定规则与常见误区this的指向问题堪称JS面试的“翻车重灾区”几乎所有面试题里都有一道this输出的陷阱题。要彻底搞定this记住四条绑定规则按优先级排序优先级从高到低分别是new绑定、显式绑定call/apply/bind、隐式绑定对象方法调用、默认绑定独立函数调用。默认绑定直接调用函数this指向全局对象浏览器里是windowNode环境是global。严格模式下指向undefined。这个细节经常被抠答“严格模式下是undefined”会加分。隐式绑定函数作为对象的方法调用时this指向那个对象。但你得小心“拔掉”方法再调用this就丢了const obj { name: obj, getName() { console.log(this.name) } } const fn obj.getName fn() // 输出什么取决于调用环境浏览器非严格模式下是window.name显式绑定call、apply、bind可以强制指定this。三者的区别是call和apply会立即执行函数传参方式不同bind返回一个新函数不立即执行。new绑定用new调用构造函数时this指向新创建的对象。这个放到后面原型链部分再展开。另外还有一个重要的点箭头函数没有自己的this。它的this是词法继承的也就是定义箭头函数时外层作用域的this。这一特性让箭头函数在回调场景里特别好用但也意味着你没法用call/apply/bind改变它的this。经典面试题来一道var name 全局 const obj { name: 对象, getName: function() { return function() { return this.name } } } console.log(obj.getName()()) // ?答案是全局。因为obj.getName()执行后返回一个普通函数这个函数被独立调用了this走默认绑定指向全局。如果改成箭头函数结果就是对象因为箭头函数继承外层this。跟this一起考的还有一道经典输出题const obj { name: obj, getName() { console.log(this.name) }, getArrow: () { console.log(this.name) } } obj.getName() // obj obj.getArrow() // 全局name箭头函数定义时外层this是全局很多人在第二行翻车。记住对象字面量不能形成作用域箭头函数定义时this捕获的是它外部最近一层的this也就是全局this。4. 原型、原型链与继承把JS面向对象讲明白4.1 构造函数、原型对象与实例之间的三角关系原型链是前端面试里公认的“劝退知识点”概念抽象、关系绕但一旦理解透了你会觉得整个JS的对象体系都清晰了。先理清三个角色构造函数Constructor、原型对象Prototype、实例Instance。它们的关系可以概括成三句话构造函数通过new创建实例构造函数有一个prototype属性指向原型对象实例有一个__proto__属性标准中叫[[Prototype]]也指向同一个原型对象function Person(name) { this.name name } Person.prototype.sayHi function() { console.log(Hi, Im ${this.name}) } const p new Person(张三) console.log(p.__proto__ Person.prototype) // true console.log(Person.prototype.constructor Person) // true这里有几个细节值得记住Person.prototype是一个对象它自带一个constructor属性指回构造函数本身。实例的__proto__和构造函数的prototype指向同一个对象所以实例能访问到原型上定义的方法。这也是为什么p.sayHi()能调用的原因实例自身没有sayHi但引擎会沿着__proto__链往上找。面试官如果问“__proto__和prototype有什么区别”标准答案是__proto__是每个对象都有的属性指向它的原型prototype是函数特有的属性指向一个对象。对象通过__proto__实现原型链查找函数通过prototype提供给实例共享方法和属性。注意现在更推荐用Object.getPrototypeOf(obj)来获取原型而不是直接访问__proto__因为后者是非标准属性。4.2 new运算符到底做了什么new运算符是理解原型链的关键一环。面试官问“new做了什么”本质上是考察你对对象创建全流程的理解。new一个构造函数时引擎内部做了四件事创建一个全新的空对象把这个空对象的__proto__指向构造函数的prototype将构造函数的this绑定到这个新对象上并执行构造函数代码为对象添加属性如果构造函数显式返回一个对象则返回那个对象否则返回新创建的对象第四步是很多人的知识盲区。如果构造函数返回的是基本类型或没写returnnew会忽略它返回新对象但如果返回的是对象返回值会覆盖新对象。function Foo() { this.name foo return { custom: true } } const f new Foo() console.log(f.name) // undefined console.log(f.custom) // true这个例子面试中偶尔出现答好它会让面试官觉得你连new的返回值机制都清楚。手动实现一个myNew是经典的手写题这里给你个参考答案function myNew(Constructor, ...args) { // 创建新对象并链接原型 const obj Object.create(Constructor.prototype) // 执行构造函数绑定this const result Constructor.apply(obj, args) // 如果构造函数返回了对象返回该对象否则返回新对象 return (typeof result object result ! null) || typeof result function ? result : obj }4.3 原型链查找机制与继承方案原型链的查找机制其实很朴素当访问一个对象的属性或方法时JS引擎先看对象自身有没有没有就去__proto__指向的原型对象上找还没有就继续往上沿着原型链一路找到Object.prototype最终如果还没找到返回undefined。const arr [1, 2, 3] // arr - Array.prototype - Object.prototype - null console.log(arr.map) // 来自Array.prototype console.log(arr.toString) // 来自Object.prototype所以继承的本质就是让子类的原型对象指向父类的一个实例这样子类实例就能顺着原型链访问到父类原型上的方法。常见的继承方式有几种面试至少要知道两种组合继承和寄生组合继承。组合继承是“构造函数继承属性 原型继承方法”的结合function Animal(name) { this.name name } Animal.prototype.speak function() { console.log(${this.name} makes a sound) } function Dog(name, breed) { Animal.call(this, name) // 继承属性 this.breed breed } Dog.prototype Object.create(Animal.prototype) // 继承方法 Dog.prototype.constructor Dog寄生组合继承是目前最推荐的方案用Object.create创建一个以父类原型为原型的对象赋给子类原型避免了父类构造函数被调用两次的问题。ES6的class本质上是寄生组合继承的语法糖所以当面试官问“class的继承原理是什么”你可以直接说“底层还是原型链那一套”。面试中还常问“如何判断一个属性是实例自身的还是原型上的”答案是hasOwnProperty。in操作符会同时检查自身和原型链hasOwnProperty只检查自身这也是区分这两个工具的核心点。5. 异步编程与事件循环面试压轴题5.1 回调、Promise与async/await的演进逻辑JS是单线程语言但异步编程是它的灵魂。面试官问你“为什么要用Promise”你得从回调地狱讲起。早期的JS只能用回调函数处理异步。回调的问题是“回调地狱”多层嵌套导致代码缩进越来越深可读性极差而且错误处理非常痛苦每个回调都要手动判断错误很容易漏。Promise的出现解决了两个核心问题一是解决了嵌套回调的书写问题把异步流程变成链式调用二是提供了统一的状态管理。Promise有三种状态pending进行中、fulfilled已成功、rejected已失败。状态一旦从pending变成fulfilled或rejected就不可再变。function fetchData(url) { return new Promise((resolve, reject) { setTimeout(() { if (url) { resolve(数据: url) } else { reject(URL不能为空) } }, 1000) }) } fetchData(/api/user) .then(res console.log(res)) .catch(err console.error(err))async/await是建立在Promise之上的语法糖让异步代码看起来像同步代码可读性大幅提升。注意await只能在async函数中使用而且async函数一定返回一个Promise。面试中常问“async/await和Promise的区别”。核心区别有两点写法上await让代码扁平化不再需要大段的.then链错误处理上async/await可以用try...catch处理和同步代码的错误处理方式一致但这也会导致一种常见错误用try...catch包住整个业务逻辑反而比.catch更容易遗漏错误。我个人建议在复杂链路中用async/await在简单单步操作中直接用Promise链就好。5.2 宏任务与微任务事件循环的执行顺序事件循环Event Loop是JS面试的高频难题也是最容易区分“背过答案”和“真懂原理”的考点。先建立模型JS引擎执行代码时遇到调用栈为空就取任务执行。任务分两类宏任务MacroTask和微任务MicroTask。宏任务包括整体脚本代码、setTimeout、setInterval、I/O操作、UI渲染微任务包括Promise.then、MutationObserver、queueMicrotask、async函数中await之后的代码。执行顺序可以概括为执行一个宏任务最开始是整个脚本执行过程中遇到微任务放到微任务队列当前宏任务执行完清空所有微任务队列执行下一个宏任务循环往复这个顺序有个关键点微任务队列必须在下一个宏任务之前全部清空。所以Promise.resolve().then(...)里的回调一定会比setTimeout里的先执行哪怕setTimeout设置的延迟是0。来看一道经典面试题console.log(script start) setTimeout(() { console.log(setTimeout) }, 0) Promise.resolve() .then(() { console.log(promise1) }) .then(() { console.log(promise2) }) console.log(script end) // 输出顺序 // script start // script end // promise1 // promise2 // setTimeout第一次输出没有promise1在执行栈里因为它被放进了微任务队列。script start和script end走的是同步代码promise1和promise2是微任务在脚本宏任务结束前被清空最后才轮到setTimeout这个宏任务。把这个流程讲清楚面试官基本就能确认你会事件循环。再升级一点async/await也有微任务的参与。await后面的代码会被推迟到微任务队列中执行本质是Promise的语法糖async function test() { console.log(1) await Promise.resolve() console.log(2) } test() console.log(3) // 输出1, 3, 2这里await让console.log(2)变成了微任务所以在console.log(3)之后执行。遇到这种题先把同步代码跑完再按微任务、宏任务的顺序输出基本不会错。5.3 Promise方法的巨坑与高频手写题面试中Promise相关的题除了问原理还特别喜欢让你对比几个静态方法all、allSettled、race、any。Promise.all等待所有Promise成功只要有一个失败就整体失败返回失败的原因。Promise.allSettled等待所有Promise执行完不管成功失败返回每个任务的结果数组。Promise.race谁先完成就用谁的结果不管成功还是失败。Promise.any谁先成功就采用谁全部失败才走失败的逻辑。它们的使用场景很清晰并发请求多个接口都成功才继续用all批量请求不关心个别失败用allSettled带超时控制用race多个镜像地址取最快可用的用any。面试中能把使用场景说清楚比背方法的定义要加分得多。手写题方面Promise.all是最高频的function myAll(promises) { return new Promise((resolve, reject) { const results [] let count 0 if (promises.length 0) { resolve([]) return } promises.forEach((promise, index) { Promise.resolve(promise) .then(value { results[index] value count if (count promises.length) { resolve(results) } }) .catch(reject) }) }) }注意几个细节入参可能是非Promise值所以要Promise.resolve包一层结果顺序要和入参顺序一致所以用索引存储只要有一个失败就整体reject所以catch直接调用reject。这些细节如果不写出来手写题大概率扣分。6. 数组与字符串高频API小知识点大分差6.1 map、filter、reduce、forEach别再搞混了数组方法是JS面试的“送分题”但也是“扣分题”。送分是因为只要用过都能答两句扣分是因为很多人对它们的重要区别说不清楚map、filter、reduce、forEach的返回值、副作用、是否可以链式调用。forEach只遍历数组没有返回值不能链式调用。map遍历数组并返回一个新数组长度和原数组一致回调里返回什么新数组对应位置就是什么。filter返回一个新数组但只保留回调返回true的元素长度可能比原数组短。reduce把整个数组“归并”成一个值适合求和、计数、扁平化等场景。const nums [1, 2, 3, 4] const doubled nums.map(n n * 2) // [2, 4, 6, 8] const evens nums.filter(n n % 2 0) // [2, 4] const sum nums.reduce((acc, n) acc n, 0) // 10面试中常见的追问是“map和forEach能相互替换吗”答案是不能因为它们语义不同。用map是为了拿到新数组用它本身的返回值是核心目的用forEach只是为了执行副作用。如果在forEach里手动push到新数组代码能跑但语义是错的面试官会扣分。另一个高频考点是“数组去重”。手写去重有几种经典方案// 方案一Set最简洁 const unique [...new Set(nums)] // 方案二filter indexOf const unique2 nums.filter((n, index) nums.indexOf(n) index) // 方案三reduce const unique3 nums.reduce((acc, n) { if (!acc.includes(n)) acc.push(n) return acc }, [])面试时优先说Set方案简洁高效但也要能说出filter indexOf的原理面试官喜欢追问“为什么indexOf(n) index就能去重”因为indexOf返回的是元素第一次出现的位置只有第一次出现时这个位置才等于当前索引。6.2 字符串方法高频考点字符串也有几个高频考点第一个就是标题热词里的“判断字符串是否包含子串”。方法有四个includes返回布尔值推荐、indexOf返回索引找不到返回-1、startsWith、endsWith判断前缀后缀。const str hello world str.includes(world) // true str.indexOf(world) // 6 str.startsWith(hello) // true str.endsWith(world) // true第二个高频考点是“时间戳转格式化的时间字符串”。这个几乎每家公司的面试都有考察点是你知不知道怎么补零、怎么拼接。一个简洁的写法function formatTime(timestamp) { const date new Date(timestamp) const pad n String(n).padStart(2, 0) return ${date.getFullYear()}-${pad(date.getMonth() 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())} } console.log(formatTime(Date.now())) // 2026-03-15 14:30:45这里注意getMonth()返回的月份是从0开始的所以一定要加1。这个细节是这道题的核心考点。第三个高频点是replace方法。replace接受字符串或正则作为第一个参数接受字符串或函数作为第二个参数。正则配合分组替换是常考的点const phone 13800138000 const masked phone.replace(/(\d{3})\d{4}(\d{4})/, $1****$2) // 138****80006.3 扩展运算符与常用遍历技巧热词里提到“扩展运算符把一个数组的值添加到另一个数组”这个操作在面试里也出现过但更常出现在实际开发中。写法很简单const arr1 [1, 2] const arr2 [3, 4] const merged [...arr1, ...arr2] // [1, 2, 3, 4]扩展运算符的适用场景很多数组合并、对象浅拷贝{...obj}、函数传参fn(...args)、类数组转数组[...arguments]。面试中问“浅拷贝有哪些方式”Object.assign、扩展运算符、Array.prototype.slice都是选项但要记得提一句它们都是浅拷贝。还有一个高频手写题是“函数柯里化”它也会用到reduce和args收集function curry(fn, ...args) { if (args.length fn.length) { return fn(...args) } return (...nextArgs) curry(fn, ...args, ...nextArgs) } function add(a, b, c) { return a b c } const curriedAdd curry(add) console.log(curriedAdd(1)(2)(3)) // 67. 面试实战常见问题与避坑速查表7.1 高频易错题清单这部分我把面试中出现的典型问题和易错点整理成一张速查表方便你考前快速过一遍。问题易错点标准回答要点typeof null的结果容易答成null返回object历史遗留buglet和var的区别只说“一个能重复声明一个不能”作用域、变量提升、暂时性死区、全局属性闭包是什么背定义但说不清原理函数词法作用域绑定外层变量不释放箭头函数的this以为指向调用方没有自己的this词法继承外层thisnew做了什么答不全四步建对象、连原型、绑this、返回判断微任务宏任务顺序输出题顺序错乱先同步再微任务再宏任务Promise.all和allSettled区别只记得allall一失败全失败allSettled等全部返回结果map和forEach区别混用map有返回值可链式forEach只执行副作用7.2 面试答题的节奏和话术技术面试不仅是答知识点还要答出“结构感”。我面试过很多人同样一个问题有的人答得零零散散有的人答得条理清晰印象分差距很大。给你一个通用的答题框架先说结论再解释原理最后给例子或补充注意点。以“什么是闭包”为例你可以这么答“闭包是指函数与其词法作用域的绑定关系。JS引擎在函数定义时保存作用域链函数执行时通过它查找变量如果一个内部函数引用了外部函数的变量即使外部函数执行完了内部函数依然持有该变量的引用这就是闭包。它的典型应用是创建私有变量和实现模块化但要注意它可能导致变量无法被垃圾回收有内存泄漏的风险。”这段回答包含了定义、原理、应用、风险四个层次面试官听完基本会满意。另一个重要的技巧是如果某个知识点没把握不要装懂。面试官追问两三轮就知道你有没有深入理解。我的建议是宁可诚实地回答“这块我只了解基础具体实现细节不是很确定”也不要临场硬编。面试官也是工程师你编的答案他大概率能听出来而且印象更差。7.3 常见坑与应对策略踩过的坑比成功的经验更值钱。我整理几个面试中特别常见、但很多人容易弄混的点。和区分不清每次做比较都用但面试中要能答出的转换规则尤其是null undefined为真、null 0为假这两条。数组遍历用错方法map和forEach混用是面试中最常见的扣分点。记住需要返回值用map不需要返回值用forEach。手写题漏掉边界条件比如手写Promise.all时不考虑空数组手写数组去重不考虑NaN。这些边界条件往往是加分的机关哪怕你主流程写完了漏了边界条件分数也会打折扣。this指向混乱解决这个问题的关键不是背规则而是练习从“调用位置”推断this。面试遇到this题先看函数是如何被调用的再套绑定规则层层推进。8. 一些想跟你说的经验这个系列第一篇就到这里。写的时候我一直在想到底什么才叫“会八股文”。后来我想明白了背下来的八股文是死的理解后的八股文是活的。同样一个闭包背定义的人只能说出“函数返回函数”理解原理的人能说清楚作用域链的保存机制、垃圾回收的影响、在框架里的应用场景。面试官想要的是后者。我自己准备面试的时候有个习惯屡试不爽每个考点都尝试用自己的话讲一遍假装对面坐着一个人我在给他解释。如果讲到某个地方卡住了或者发现需要靠死记才能说下去说明这块还没真正吃透回去再啃一遍源码或者再写一个demo。这个方法比刷十道题都有用。接下来这个系列会继续聊Promise源码实现、事件循环的进阶题、数组手写题大全、ES6新特性、模块化机制这些硬核内容。你可以关注后续文章也可以直接把这篇里提到的知识点先在本地跑一遍尤其是事件循环输出题和手写题动手敲过一次比盯着屏幕看十遍都记得牢。最后分享一个实操小技巧面试前把本文的速查表打印出来或者存成手机备忘录前一晚过一遍第二天进面试间前再看一眼。不用背新东西就把“易错点”和“标准回答要点”扫一遍足够帮你避开80%的常见坑。祝面试顺利。
![[光学原理与应用-521]：对光的错误理解与纠偏](http://pic.xiahunao.cn/yaotu/[光学原理与应用-521]：对光的错误理解与纠偏)
