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 构建