JavaScript 不只是“网页特效语言”，它本质上是一门：

动态语言
原型继承语言
单线程事件驱动语言
多范式语言（函数式 + 面向对象 + 异步编程）

现代前端（Vue / React / Node.js / Electron / 小程序）核心都建立在 JavaScript 高级能力上。

JavaScript 高级学习路线

基础语法
↓
作用域 / 闭包 / this
↓
原型 / 原型链 / 继承
↓
执行上下文 / Event Loop
↓
异步编程 Promise async await
↓
模块化 ES Module
↓
高级函数式编程
↓
设计模式
↓
浏览器原理
↓
性能优化
↓
工程化
↓
源码阅读

---

一、作用域（Scope）

作用域决定变量可以在哪里访问。

1. 全局作用域

var a = 10

function test() {
  console.log(a)
}

test()

2. 函数作用域

function demo() {
  var msg = 'hello'
}

console.log(msg) // 报错

3. 块级作用域（ES6）

{
  let name = 'Tom'
}

console.log(name) // 报错

---

二、闭包（Closure）

闭包本质：

内部函数引用外部函数变量

闭包经典案例

function createCounter() {
  let count = 0

  return function () {
    count++
    return count
  }
}

const counter = createCounter()

console.log(counter()) // 1
console.log(counter()) // 2

闭包作用

1. 数据私有化

function user() {
  let password = '123456'

  return {
    check(pwd) {
      return pwd === password
    }
  }
}

2. 缓存

function cacheFn() {
  const cache = {}

  return function (key) {
    if (cache[key]) {
      return cache[key]
    }

    const result = key + '计算结果'

    cache[key] = result

    return result
  }
}

---

三、this 指向

普通函数

function test() {
  console.log(this)
}

test()

浏览器中默认指向：

window

严格模式下：

undefined

对象调用

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

obj.say()

箭头函数

箭头函数没有自己的 this。

const obj = {
  name: 'Tom',

  say() {
    const fn = () => {
      console.log(this.name)
    }

    fn()
  }
}

---

四、call apply bind

call

fn.call(obj, arg1, arg2)

apply

fn.apply(obj, [1, 2])

bind

const newFn = fn.bind(obj)

---

五、原型与原型链

prototype

function Person() {}

Person.prototype.say = function () {
  console.log('hello')
}

proto

const p = new Person()

console.log(p.__proto__ === Person.prototype)

原型链结构

对象
↓
构造函数 prototype
↓
Object.prototype
↓
null

---

六、继承

原型链继承

function Animal() {
  this.type = 'animal'
}

function Dog() {}

Dog.prototype = new Animal()

class 继承

class Animal {
  speak() {
    console.log('动物叫')
  }
}

class Dog extends Animal {
  speak() {
    console.log('汪汪')
  }
}

---

七、执行上下文

执行栈

全局执行上下文
↓
函数执行上下文
↓
函数执行上下文

示例

function a() {
  b()
}

function b() {
  console.log('b')
}

a()

---

八、变量提升（Hoisting）

var

console.log(a)

var a = 10

let const

console.log(a)

let a = 10

会产生暂时性死区（TDZ）。

---

九、Event Loop

JavaScript 是单线程。

执行顺序：

同步任务
↓
微任务 Promise
↓
宏任务 setTimeout

面试题

console.log(1)

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

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

console.log(4)

输出：

1
4
3
2

---

十、Promise

Promise 三状态

pending
fulfilled
rejected

基础写法

const p = new Promise((resolve, reject) => {
  resolve('成功')
})

then

p.then(res => {
  console.log(res)
})

catch

p.catch(err => {
  console.log(err)
})

---

十一、async await

async function test() {
  const res = await fetch('/api')

  console.log(res)
}

本质：

async => 返回 Promise
await => 等待 Promise

---

十二、深拷贝 vs 浅拷贝

浅拷贝

const obj2 = Object.assign({}, obj1)

深拷贝

structuredClone

const newObj = structuredClone(obj)

JSON

JSON.parse(JSON.stringify(obj))

缺点：

• 无法拷贝函数
• 无法拷贝 undefined
• 无法拷贝 Date

---

十三、防抖（Debounce）

function debounce(fn, delay) {
  let timer = null

  return function (...args) {
    clearTimeout(timer)

    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

---

十四、节流（Throttle）

function throttle(fn, delay) {
  let flag = true

  return function (...args) {
    if (!flag) return

    flag = false

    setTimeout(() => {
      fn.apply(this, args)
      flag = true
    }, delay)
  }
}

---

十五、模块化（ES Module）

导出

export const name = 'Tom'

默认导出

export default App

导入

import App from './App.js'

---

十六、垃圾回收机制（GC）

JavaScript 自动垃圾回收。

核心：

引用计数
标记清除

---

十七、内存泄漏

常见情况：

• 定时器没清除
• 闭包滥用
• DOM 引用未释放
• 事件监听未移除

---

十八、设计模式

单例模式

class Singleton {
  static instance

  static getInstance() {
    if (!this.instance) {
      this.instance = new Singleton()
    }

    return this.instance
  }
}

发布订阅模式

class EventBus {
  constructor() {
    this.events = {}
  }

  on(name, fn) {
    this.events[name] ||= []
    this.events[name].push(fn)
  }

  emit(name, data) {
    this.events[name]?.forEach(fn => fn(data))
  }
}

---

十九、浏览器渲染原理

HTML
↓
DOM Tree

CSS
↓
CSSOM

DOM + CSSOM
↓
Render Tree

Layout
↓
Paint
↓
Composite

---

二十、性能优化

JS 优化

• 防抖节流
• 懒加载
• 虚拟列表
• Web Worker
• 代码分割

渲染优化

• 减少重排重绘
• transform 替代 top
• requestAnimationFrame
• GPU 加速

---

二十一、现代 JS 常用 API

数组

map
filter
reduce
find
some
every
flat

对象

Object.keys()
Object.values()
Object.entries()

异步

Promise.all()
Promise.race()
Promise.allSettled()

---

二十二、源码学习方向

推荐阅读：

• Vue3 响应式源码
• React Fiber
• Vite
• Pinia
• Axios
• Lodash

---

二十三、JavaScript 高级学习顺序

第一阶段（核心基础）

1. 作用域
2. 闭包
3. this
4. 原型链
5. 执行上下文

第二阶段（异步）

1. Event Loop
2. Promise
3. async await
4. 宏任务微任务

第三阶段（工程化）

1. ES Module
2. Vite
3. Babel
4. Webpack
5. TypeScript

第四阶段（源码）

1. Vue3
2. React
3. Vite
4. Node.js

---

二十四、推荐学习资源

官方文档

• MDN Web Docs
• ECMAScript 官方规范
• JavaScript.info
• Node.js 官方文档
• V8 JavaScript Engine
• TypeScript 官方文档

Vue / React 相关

• Vue3 官方文档
• React 官方文档
• Pinia 官方文档
• React Router
• Vue Router

工程化工具

• Vite 官方文档
• Webpack 官方文档
• Babel 官方文档
• ESLint 官方文档
• Prettier 官方文档
• pnpm 官方文档
• npm 官方文档

学习网站

• freeCodeCamp
• 菜鸟教程 JavaScript
• 现代 JavaScript 教程
• 阮一峰 ES6 教程
• 廖雪峰 JavaScript 教程

视频学习推荐

B站

• 尚硅谷 JavaScript 高级教程
• 黑马程序员 JavaScript 教程
• coderwhy 前端系列
• 技术胖 JavaScript 进阶
• 珠峰前端高级课

练习网站

• Codewars
• LeetCode
• Frontend Mentor
• Exercism JavaScript
• CodePen

开源源码学习

• Vue3 GitHub
• React GitHub
• Vite GitHub
• Axios GitHub
• Lodash GitHub
• Node.js GitHub

练习网站

• Codewars
• LeetCode
• Frontend Mentor

---

二十五、高级面试重点

• 闭包
• this
• 原型链
• Promise
• Event Loop
• 防抖节流
• 深拷贝
• call/apply/bind
• async await
• 垃圾回收

---

二十六、前端高级工程师核心能力

技术层

• JavaScript 深度
• TypeScript
• Vue / React
• Node.js
• 工程化
• 性能优化
• 网络
• 安全

工程层

• 架构能力
• 组件设计
• 可维护性
• CI/CD
• 微前端

业务层

• 产品理解
• 用户体验
• SEO
• 数据分析

---

二十七、最终建议

JavaScript 高级阶段不要只停留在“看懂”。

必须做到：

自己手写
自己调试
自己实现
自己封装
自己造轮子

重点推荐手写：

• Promise
• call/apply/bind
• new
• instanceof
• 深拷贝
• EventBus
• 防抖节流
• 虚拟 DOM
• 响应式系统

这些能力会真正拉开高级前端与普通前端之间的差距。