Skip to content

第一阶段:作用域与执行机制(核心基础) ​

这是 JS 最底层。

不会这一块,后面全乱。


1. 执行上下文 ​

必须掌握 ​

  • 全局执行上下文
  • 函数执行上下文
  • 调用栈

高频问题 ​

  • JS 代码如何执行
  • 变量如何查找

2. 作用域 ​

高频内容 ​

  • 词法作用域
  • 动态作用域(为什么 JS 不是)
  • 块级作用域
  • let/const/var 区别

深挖方向 ​

  • 暂时性死区(TDZ)
  • 为什么存在 TDZ

3. 闭包(超高频) ​

必须掌握 ​

  • 什么是闭包
  • 为什么会形成闭包
  • 闭包的应用
  • 闭包为什么会内存泄漏

真实项目应用 ​

  • 防抖节流
  • 柯里化
  • hooks
  • composables

本质都和闭包有关。


第二阶段:this 与原型(中高级核心) ​


1. this 指向(超高频) ​

必须掌握 ​

  • 默认绑定
  • 隐式绑定
  • 显式绑定
  • new 绑定
  • 箭头函数

高频代码题 ​

js
var name = 'window'

const obj = {
  name: 'obj',
  fn() {
    console.log(this.name)
  }
}

2. call / apply / bind ​

必须掌握 ​

  • 区别
  • 使用场景
  • 手写 bind

3. 原型与原型链(超高频) ​

必须彻底理解 ​

text
对象 -> prototype -> __proto__

核心点 ​

  • prototype
  • proto
  • constructor
  • instanceof

深挖方向 ​

  • new 做了什么
  • instanceof 原理
  • 为什么函数也是对象

第三阶段:异步(最重要) ​

这一块是前端面试真正的重灾区。


1. Promise(超高频) ​

必须彻底理解 ​

  • Promise 三种状态
  • then 链式调用
  • 值穿透
  • Promise.resolve
  • Promise.all
  • Promise.race

深挖方向 ​

  • Promise 为什么能链式调用
  • then 为什么返回新 Promise
  • 微任务

2. async / await ​

高频问题 ​

  • async 本质
  • await 做了什么
  • 为什么 await 后面像同步

3. Event Loop(超高频) ​

必须掌握 ​

  • 宏任务
  • 微任务
  • 浏览器事件循环
  • Node 事件循环(了解)

高频代码题 ​

js
console.log(1)

setTimeout(() => {
  console.log(2)
})

Promise.resolve().then(() => {
  console.log(3)
})

console.log(4)

一定要能手算执行顺序。


第四阶段:对象与继承 ​


1. 深浅拷贝 ​

高频问题 ​

  • 浅拷贝问题
  • 深拷贝方案

深挖方向 ​

  • 循环引用
  • structuredClone

2. 继承 ​

重点内容 ​

  • 原型链继承
  • 组合继承
  • class extends

深挖方向 ​

  • ES6 class 本质

第五阶段:数组与函数式编程 ​


1. 数组高频 API ​

必须熟悉 ​

  • map
  • filter
  • reduce
  • some/every
  • flat

高频内容 ​

  • reduce 应用

2. 函数式编程 ​

重点内容 ​

  • 纯函数
  • 柯里化
  • 高阶函数

真实项目很常见。


第六阶段:浏览器机制(高频) ​

这一块非常重要。

因为前端不是只会 JS。


1. 浏览器渲染流程 ​

必须掌握 ​

text
HTML
-> DOM
CSS
-> CSSOM
-> Render Tree
-> Layout
-> Paint

2. 回流与重绘 ​

高频内容 ​

  • 什么触发回流
  • 如何减少回流

3. 防抖节流 ​

必须掌握 ​

  • 应用场景
  • 手写实现

4. 存储 ​

重点内容 ​

  • cookie
  • localStorage
  • sessionStorage
  • IndexedDB(了解)

第七阶段:网络(前端核心) ​


1. HTTP ​

必须掌握 ​

  • GET/POST
  • 状态码
  • HTTP1.1
  • HTTP2

2. 浏览器缓存(超高频) ​

必须掌握 ​

  • 强缓存
  • 协商缓存

核心头部 ​

text
Cache-Control
ETag
Last-Modified

3. 跨域 ​

重点内容 ​

  • CORS
  • preflight
  • proxy
  • iframe
  • postMessage

第八阶段:ES6+(必问) ​


1. let / const ​


2. 解构赋值 ​


3. Symbol ​


4. Set / Map / WeakMap(高频) ​

深挖方向 ​

  • WeakMap 为什么不会内存泄漏

Vue3 响应式会用到。


5. Proxy(超高频) ​

必须掌握 ​

  • 和 defineProperty 区别

第九阶段:手写题(必须练) ​

现在很多面试:

JS 一定会手写。


高频手写 ​

必须练:

  • debounce
  • throttle
  • Promise.all
  • call
  • bind
  • new
  • instanceof
  • 深拷贝
  • 发布订阅
  • compose

第十阶段:真实项目问题(最重要) ​

真正高级面试:

不只是八股。

而是:

你在项目里真正解决过什么问题。


1. 性能优化 ​

真实项目内容 ​

  • 大列表
  • 防重复提交
  • 请求竞态

2. 异步请求管理 ​

重点内容 ​

  • 请求取消
  • AbortController
  • 竞态问题

3. 内存泄漏 ​

高频内容 ​

  • 定时器
  • 事件监听
  • 闭包
  • keep-alive

三、JS 最值得深挖的几个模块(核心) ​

如果时间有限。

优先:


第一优先级(核心) ​

  • 闭包
  • this
  • 原型链
  • Promise
  • Event Loop

第二优先级 ​

  • 浏览器渲染
  • 缓存
  • 跨域
  • Proxy

第三优先级 ​

  • 手写题
  • 函数式编程
  • 设计模式

四、AI 如何高效辅助 JS 学习(非常推荐) ​


1. 深挖模式(最有效) ​

text
请连续深挖 Promise,直到源码级

2. 执行顺序训练(特别重要) ​

例如:

js
console.log(1)

setTimeout(() => {
  console.log(2)
})

Promise.resolve().then(() => {
  console.log(3)
})

console.log(4)

让 AI:

text
请逐行分析执行过程

这个提升极大。


3. 手写训练 ​

text
请让我手写 Promise.all,一次只提示一步

非常适合面试训练。


4. 面试模式 ​

text
请作为高级前端面试官,连续深挖 JS

五、推荐你的 JS 复习路线(结合你当前情况) ​

你已经有:

  • Vue3
  • Vite
  • 权限
  • 工程化
  • H5
  • uniapp

所以你现在不是“入门”。

而是:

要把 JS 底层补扎实。


第一阶段(重点) ​

  • 闭包
  • this
  • 原型链
  • Promise
  • Event Loop

第二阶段 ​

  • 浏览器机制
  • 缓存
  • 跨域
  • Proxy

第三阶段 ​

  • 手写题
  • 性能优化
  • 异步管理

六、真正最重要的一件事 ​

JS 面试不是:

你知不知道 API

而是:

你能不能解释运行过程。

例如:

  • 为什么 Promise 是微任务
  • 为什么 nextTick 更早
  • 为什么闭包不会销毁
  • 为什么 Proxy 更强
  • 为什么 Vue3 用 WeakMap

这些才是中高级前端面试真正的核心。


七、推荐你的每日复习节奏(非常建议) ​

每天 1~2 小时 ​


第一阶段:学习(30 分钟) ​

学习一个核心模块。

例如:

  • Promise
  • Event Loop
  • 原型链

第二阶段:深挖(30 分钟) ​

让 AI 深挖:

text
继续深挖
text
从底层执行过程解释
text
真实项目中会出现什么问题

第三阶段:输出(30 分钟) ​

一定要自己讲。

例如:

text
我来回答,你帮我评分

面试最重要的是:

能清晰表达。


八、最终目标 ​

最终你要达到的不是:

“我学过 JavaScript”

而是:

  • 能解释运行机制
  • 能分析执行过程
  • 能理解底层设计
  • 能结合真实项目
  • 能抗住连续追问
  • 能手写高频题

这样你在中高级前端面试中会非常有竞争力。

基于 Obsidian + VitePress 构建