[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fIgD-uMAyxyQoEwHzPOJUtNOcc8PTK_2KCyvx3aAv8bQ":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":21,"subCategory":24,"comments":26,"status":17,"reason":12,"notice":12,"visitCount":27,"commentCount":28,"keywords":29},195,"2026-09-02T14:16:59.539Z","JS 高级面试题 20 道（含标准答案·可直接背诵）","# JS 高级面试题 20 道\n\n---\n\n## 1. 讲讲 JS 执行上下文、作用域、作用域链、闭包的完整关系？\n\n**答案：**\n\n执行上下文是代码执行的环境容器，包含变量、作用域、`this` 等；作用域是变量的可访问范围；作用域链是多层作用域嵌套形成的变量查找链条，由内向外逐级查找。\n\n闭包是内层函数引用外层函数变量，且内层函数被外部持有，导致外层执行上下文无法销毁的现象。\n\n**核心用途：** 私有化变量、防抖节流、缓存数据、解决循环定时器变量问题。\n\n**弊端：** 容易造成内存泄漏。\n\n---\n\n## 2. 闭包产生的内存泄漏如何解决？\n\n**答案：**\n\n- 手动置空闭包引用的变量、函数：赋值为 `null`\n- 及时解绑定时器、事件监听\n- 避免全局长期持有闭包函数引用\n- 组件卸载时销毁闭包逻辑，清空缓存\n\n---\n\n## 3. 讲讲 JS 变量提升、函数提升的区别？\n\n**答案：**\n\n- `var` 变量提升：提升声明，初始值为 `undefined`，可先使用后定义，存在变量提升混乱问题\n- `let/const`：存在暂时性死区，只提升声明、不初始化，无法提前访问\n- 函数声明：整体提升，优先级高于变量提升，可直接提前调用\n- 函数表达式：遵循变量提升规则，不会整体提升\n\n---\n\n## 4. `this` 指向的五种绑定规则及优先级？\n\n**答案：**\n\n**优先级从高到低：** `new` 绑定 > 显式绑定（`call` / `apply` / `bind`）> 隐式绑定（对象调用）> 默认绑定（全局 / `undefined`）> 箭头函数绑定\n\n- **默认绑定**：普通独立函数调用，`this` 指向 `window` / `undefined`（严格模式）\n- **隐式绑定**：对象.函数()，`this` 指向调用对象\n- **显式绑定**：`call` / `apply` / `bind`，手动指定 `this`\n- **`new` 绑定**：构造函数调用，`this` 指向新实例\n- **箭头函数**：无自身 `this`，继承外层作用域 `this`，不参与以上绑定\n\n---\n\n## 5. `call`、`apply`、`bind` 区别？各自应用场景？\n\n**答案：**\n\n- `call`：参数逐个传递，立即执行\n- `apply`：参数数组传递，立即执行\n- `bind`：参数逐个传递，返回新函数，延迟执行，可固化 `this` 和参数\n\n**场景：**\n\n- `apply` 用于数组批量传参（`Math.max.apply(null, [1, 2, 3])`）\n- `bind` 用于定时器、事件回调固化 `this`\n- `call` 用于简单 `this` 劫持\n\n---\n\n## 6. 原型、原型链、继承原理？\n\n**答案：**\n\n每个函数有 `prototype` 原型对象，每个实例有 `__proto__` 指向构造函数 `prototype`；原型链是实例逐级 `__proto__` 查找形成的链条，属性查找机制：自身没有则向上找原型，直到 `Object.prototype`，最终为 `null`。\n\nJS 继承核心：子类原型指向父类实例，实现属性和方法复用，现代开发优先使用 ES6 `class` 继承。\n\n---\n\n## 7. ES6 class 是真类吗？和 ES5 构造函数区别？\n\n**答案：**\n\n`class` 是语法糖，底层依然是构造函数 + 原型，并非真正面向对象类。\n\n**区别：** `class` 默认严格模式、不可枚举、必须 `new` 调用、方法不可遍历、支持静态属性、私有属性，语法更规范，规避 ES5 构造函数原型混乱问题。\n\n---\n\n## 8. 讲讲 JS 事件循环机制（宏任务、微任务）执行顺序？\n\n**答案：**\n\n**完整执行顺序：** 同步代码 > 清空所有微任务 > 执行一轮宏任务 > 重复循环\n\n- **微任务**：`Promise.then/catch/finally`、`async/await`、`queueMicrotask`、`MutationObserver`（优先级高）\n- **宏任务**：`script` 整体、`setTimeout`、`setInterval`、AJAX、DOM 事件（优先级低）\n\n**核心：** 每一轮事件循环，微任务队列必须清空，才会执行下一个宏任务。\n\n---\n\n## 9. `async/await` 底层原理？和 Promise 的关系？\n\n**答案：**\n\n`async/await` 是 Promise + 生成器 Generator 的语法糖，彻底解决 Promise 链式嵌套地狱。\n\n`async` 修饰函数默认返回 Promise；`await` 阻塞同步代码，等待 Promise 状态完成，将异步结果转为同步写法。\n\n**执行顺序：** `await` 之后的代码全部推入微任务队列。\n\n---\n\n## 10. Promise 三种状态、特点、为什么状态不可逆？\n\n**答案：**\n\n**三种状态：** `pending`（等待）、`fulfilled`（成功）、`rejected`（失败）。\n\n**核心特点：** 状态一旦改变永久凝固，不可逆、不可二次修改，避免异步结果多次变更导致逻辑混乱。\n\n**常用 API：** `then/catch/finally/all/race/allSettled/any`。\n\n---\n\n## 11. `Promise.all`、`race`、`allSettled`、`any` 区别和业务场景？\n\n**答案：**\n\n- `all`：全部成功才成功，一个失败直接失败（适合批量接口全部请求）\n- `race`：谁先完成返回谁（适合接口超时拦截）\n- `allSettled`：全部执行完毕，不管成功失败（适合批量统计结果）\n- `any`：一个成功即成功，全部失败才失败（适合多接口容错降级）\n\n---\n\n## 12. 讲讲 JS 防抖、节流原理及区别？手写核心代码？\n\n**答案：**\n\n- **防抖**：频繁触发时，延迟 n 秒执行，期间再次触发重置计时，只执行最后一次（搜索输入、窗口 resize）\n- **节流**：固定时间内只执行一次，限制频率（滚动、拖拽、点击防重）\n\n**核心：** 防抖侧重结束后执行，节流侧重过程中限流。\n\n```javascript\n// 防抖\nfunction debounce(fn, wait) {\n  let timer = null;\n  return function (...args) {\n    clearTimeout(timer);\n    timer = setTimeout(() => fn.apply(this, args), wait);\n  };\n}\n\n// 节流\nfunction throttle(fn, wait) {\n  let lastTime = 0;\n  return function (...args) {\n    const now = Date.now();\n    if (now - lastTime >= wait) {\n      lastTime = now;\n      fn.apply(this, args);\n    }\n  };\n}\n```\n\n---\n\n## 13. 深浅拷贝区别？手写完整深拷贝（解决循环引用）？\n\n**答案：**\n\n- **浅拷贝**：只拷贝一层，引用类型共享内存，修改互相影响（`Object.assign`、扩展运算符）\n- **深拷贝**：递归拷贝所有层级，完全独立，修改互不影响\n\n`JSON.parse(JSON.stringify(obj))` 缺陷：无法拷贝函数、`undefined`、正则、日期、丢失循环引用；完整深拷贝需递归 + `WeakMap` 解决循环引用。\n\n```javascript\nfunction deepClone(obj, map = new WeakMap()) {\n  if (obj === null || typeof obj !== 'object') return obj;\n  if (obj instanceof Date) return new Date(obj);\n  if (obj instanceof RegExp) return new RegExp(obj);\n  if (map.has(obj)) return map.get(obj);\n\n  const clone = Array.isArray(obj) ? [] : {};\n  map.set(obj, clone);\n\n  for (const key in obj) {\n    if (obj.hasOwnProperty(key)) {\n      clone[key] = deepClone(obj[key], map);\n    }\n  }\n  return clone;\n}\n```\n\n---\n\n## 14. 垃圾回收机制、V8 垃圾回收原理？\n\n**答案：**\n\nJS 自动垃圾回收，核心机制：可达性分析，无法从根对象访问的变量自动回收。\n\nV8 分代回收：\n\n- **新生代**：副垃圾回收，复制算法，快\n- **老生代**：主垃圾回收，标记清除 / 标记整理\n\n**常见内存泄漏：** 闭包残留、定时器未清空、事件监听未解绑、全局变量过多、DOM 引用未释放。\n\n---\n\n## 15. 宏任务和微任务的性能差异？为什么微任务更快？\n\n**答案：**\n\n微任务属于当前执行栈末尾，本轮代码执行完立即清空，无需等待下一轮事件循环；宏任务需要等待下一轮事件循环，存在间隔延迟。\n\n高频异步逻辑优先用微任务，减少页面延迟、提升响应速度。\n\n---\n\n## 16. ES6 模块化与 CommonJS 模块化区别？\n\n**答案：**\n\n- **CommonJS**：运行时加载、动态导入、值拷贝、同步加载、服务端主流\n- **ES6 Module**：编译时加载、静态解析、实时引用、支持 Tree-shaking、浏览器/Node 通用\n\n**核心：** ESM 可静态优化，CommonJS 无法做编译优化。\n\n---\n\n## 17. 讲讲 Proxy 与 `Object.defineProperty` 区别？除了 Vue 响应式还有什么用途？\n\n**答案：**\n\n`defineProperty` 仅拦截属性读写；`Proxy` 拦截对象读写、删除、遍历、调用、构造等 13 种行为。\n\n**拓展用途：** 表单校验、权限拦截、数据缓存、接口请求封装、全局状态监听、数据脱敏。\n\n---\n\n## 18. 原型链污染是什么？如何防范？\n\n**答案：**\n\n原型链污染是恶意代码修改 `Object.prototype` 原型属性，导致全局所有对象属性被篡改，引发全局逻辑异常。\n\n**防范：**\n\n- 冻结原型：`Object.freeze(Object.prototype)`\n- 使用 `hasOwnProperty` 判断属性是否自身\n- 规避未知对象合并\n- 过滤 `__proto__`、`constructor` 字段\n\n---\n\n## 19. 前端常见的内存泄漏场景及解决方案？\n\n**答案：**\n\n- **全局变量滥用**：尽量用局部变量、模块化作用域\n- **定时器 / 监听未销毁**：组件卸载手动清空\n- **闭包常驻引用**：手动置空引用变量\n- **DOM 节点移除但 JS 引用保留**：清空 DOM 变量\n- **缓存无限堆积**：设置缓存过期、最大容量\n\n---\n\n## 20. 手写 Promise 核心原理，说说 Promise 解决了什么痛点？\n\n**答案：**\n\n**Promise 核心：** 状态管理、异步队列缓存、链式调用、状态不可逆。\n\n**解决痛点：** 彻底解决回调地狱、统一异步错误处理、支持并行/串行异步控制、异步逻辑可链式复用、代码可读性大幅提升。\n\n**核心实现要点：** 三种状态、`resolve/reject` 状态锁定、`then` 异步队列、链式返回新 Promise。\n\n```javascript\nclass MyPromise {\n  constructor(executor) {\n    this.state = 'pending';\n    this.value = undefined;\n    this.reason = undefined;\n    this.onFulfilledCallbacks = [];\n    this.onRejectedCallbacks = [];\n\n    const resolve = (value) => {\n      if (this.state === 'pending') {\n        this.state = 'fulfilled';\n        this.value = value;\n        this.onFulfilledCallbacks.forEach((fn) => fn());\n      }\n    };\n\n    const reject = (reason) => {\n      if (this.state === 'pending') {\n        this.state = 'rejected';\n        this.reason = reason;\n        this.onRejectedCallbacks.forEach((fn) => fn());\n      }\n    };\n\n    try {\n      executor(resolve, reject);\n    } catch (err) {\n      reject(err);\n    }\n  }\n\n  then(onFulfilled, onRejected) {\n    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : (v) => v;\n    onRejected =\n      typeof onRejected === 'function'\n        ? onRejected\n        : (err) => {\n            throw err;\n          };\n\n    const promise2 = new MyPromise((resolve, reject) => {\n      if (this.state === 'fulfilled') {\n        setTimeout(() => {\n          try {\n            const x = onFulfilled(this.value);\n            resolve(x);\n          } catch (err) {\n            reject(err);\n          }\n        }, 0);\n      } else if (this.state === 'rejected') {\n        setTimeout(() => {\n          try {\n            const x = onRejected(this.reason);\n            resolve(x);\n          } catch (err) {\n            reject(err);\n          }\n        }, 0);\n      } else if (this.state === 'pending') {\n        this.onFulfilledCallbacks.push(() => {\n          setTimeout(() => {\n            try {\n              const x = onFulfilled(this.value);\n              resolve(x);\n            } catch (err) {\n              reject(err);\n            }\n          }, 0);\n        });\n        this.onRejectedCallbacks.push(() => {\n          setTimeout(() => {\n            try {\n              const x = onRejected(this.reason);\n              resolve(x);\n            } catch (err) {\n              reject(err);\n            }\n          }, 0);\n        });\n      }\n    });\n\n    return promise2;\n  }\n}\n```\n","这里给大家推荐20道js的高级面试题，含答案，供大家复习和学习，希望对大家有帮助。","",525978185445445,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"16100000003","上班墨鱼",1,"https://image.xinwei.ltd/bbd06233d9b5c67c9f8ddd35b63cb81f1710561355517.jpeg","没有什么缺点，大家低调点","2024-03-16T00:30:44.932Z",2,{"id":21,"name":23},"IT技术",{"id":21,"name":25,"parentId":21},"JavaScript&HTML&CSS",[],15,0,"js面试题,javascript,js,web js,web面试题,javascript面试题,高级javascript,js上下文"]