JavaScript 进阶核心知识点

JavaScript 进阶核心知识点

按学习优先级排序，涵盖语法进阶、异步、原型、作用域、设计模式、工程化等企业高频考点，附要点+示例。

一、ES6+ 核心进阶语法（必学）

1. 变量与解构

• let / const：块级作用域，替代 var；const 声明引用类型可改属性，不可重赋值。
• 数组/对象解构：快速取值，简化代码

// 数组解构
const [a, b] = [1, 2];
// 对象解构
const { name, age } = { name: "小明", age: 20 };

• 剩余/扩展运算符 ...
  • 扩展：拷贝数组、合并对象
  • 剩余参数：收集函数多余入参

2. 箭头函数

• 特点：无自身 this、无 arguments、不能作为构造函数、不能用 yield
• 适用：简短回调；不适用：对象方法、定时器回调（需绑定this）

const fn = (x) => x * 2;

3. 数据结构

• Set：去重、判断元素是否存在
• Map：键可以是任意类型（弥补对象键只能是字符串/Symbol的缺陷）
• Symbol：唯一私有属性标识，防止属性名冲突

4. 类 Class

语法糖，本质还是原型继承，支持constructor、静态方法static、继承extends、super。

class Person {
  constructor(name) { this.name = name; }
  say() { console.log(this.name); }
}
class Student extends Person {}

5. 模块化 ES Module

浏览器/Node 通用模块化方案，替代CommonJS：

• 导出：export / export default
• 导入：import

---

二、作用域 & 闭包（重中之重）

1. 作用域分类

• 全局作用域 、函数作用域 、块级作用域 （let/const 产生）
• 作用域链：内层作用域可访问外层变量，反之不行。

2. 闭包

定义：函数嵌套，内层函数引用外层函数的变量/参数，内层在外部执行，形成闭包。

• 作用：延长变量生命周期、私有化变量、柯里化
• 缺点：容易造成内存泄漏，需手动释放

function outer() {
  let num = 1;
  return function inner() {
    console.log(num++);
  }
}
const fn = outer();
fn(); // 1
fn(); // 2

3. 变量提升 & 暂时性死区

• var 变量、函数声明会提升；let/const 存在暂时性死区，提升但不初始化，声明前不能访问。

---

三、this 指向（面试高频）

this 指向调用时的上下文，和定义位置无关，5 种场景：

1. 普通函数调用 ：非严格模式 → window；严格模式 → undefined
2. 对象方法调用：指向调用该方法的对象
3. 构造函数 new：指向实例对象
4. 箭头函数 ：继承外层作用域的 this，自身无this
5. call / apply / bind ：手动修改this指向
   • call(上下文, 参数1, 参数2...)
   • apply(上下文, [参数数组])
   • bind：返回新函数，不会立即执行

---

四、原型 & 原型链（JS 继承核心）

1. 每个函数 都有 prototype（显式原型），存放共享方法/属性。
2. 每个实例对象 都有 __proto__（隐式原型），指向构造函数的 prototype。
3. 原型链 ：对象查找属性/方法时，先找自身，再顺着 __proto__ 向上查找，直到 null。
4. constructor：原型上的属性，指向构造函数。

经典继承方式：原型链继承、构造函数继承、组合继承、寄生组合继承。

---

五、异步 JavaScript（前端进阶核心）

JS 是单线程 ，异步解决阻塞问题，发展路线：回调函数 → Promise → async/await

1. 同步/异步、宏任务 & 微任务（事件循环 Event Loop）

任务划分

• 宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件
• 微任务：Promise.then/catch/finally、queueMicrotask、async/await

执行顺序

1. 执行同步代码
2. 清空所有微任务队列
3. 执行一个宏任务，再重复 2→3

2. Promise

解决回调地狱 ，三种状态：pending(进行中)、fulfilled(成功)、rejected(失败)，状态一旦改变不可逆。

• 常用方法：.then()、.catch()、.finally()
• 静态方法：Promise.all()、Promise.race()、Promise.allSettled()

3. async / await

Promise 的语法糖，让异步代码写法像同步，底层依旧是Promise。

• async 修饰函数，返回Promise
• await 等待Promise执行完成，只能在 async 函数内使用

4. 其他异步方案

• Generator 生成器函数（function* + yield），分段执行代码，偏老旧方案。

---

六、DOM & BOM 进阶

1. DOM 高级

• 事件流：捕获阶段 → 目标阶段 → 冒泡阶段
• 事件委托（事件代理）：利用事件冒泡，给父元素绑定事件，代理子元素，提升性能、适配动态节点。
• 阻止冒泡：e.stopPropagation()
• 阻止默认行为：e.preventDefault()

2. BOM 进阶

• window 核心对象：定时器、location(地址)、history(路由)、navigator(浏览器信息)
• 本地存储：
  • localStorage：永久存储，同源共享，容量约5M
  • sessionStorage：会话级，页面关闭即清空
  • Cookie：容量小(4K)，可设置过期时间，会随请求发送到服务端

---

七、数组 & 对象高阶方法

数组高阶（遍历/处理）

map、filter、reduce、forEach、find、findIndex、some、every、sort

重点：reduce 功能最强，可实现累加、数组转对象、扁平化等。

// 求和
const arr = [1,2,3];
const sum = arr.reduce((pre, cur) => pre + cur, 0);

对象进阶

• Object.keys() / Object.values() / Object.entries() 遍历对象
• Object.assign() 浅拷贝对象
• 深浅拷贝：
  • 浅拷贝：只拷贝一层，引用类型共享地址
  • 深拷贝：完全独立，方法：递归、JSON.parse(JSON.stringify())（有缺陷：无法拷贝函数、正则、循环引用）

---

八、设计模式（常用）

前端工程化常用，简化代码、提升复用性：

1. 单例模式：全局唯一实例（弹窗、全局状态）
2. 工厂模式：统一创建对象
3. 观察者模式/发布订阅：组件通信、事件监听（Vue/React 底层常用）
4. 代理模式：数据劫持（Vue2 Object.defineProperty、Vue3 Proxy）

---

九、前端工程化 & 高阶API

1. Proxy / Object.defineProperty
   • 数据劫持，实现响应式；Proxy 可监听数组、新增属性，功能更强。
2. 严格模式 'use strict'：限制不规范语法，减少bug。
3. 函数进阶：柯里化、节流、防抖（面试/项目高频）
   • 防抖：频繁触发时，停止触发后延迟执行（搜索框输入）
   • 节流：固定间隔执行（滚动、窗口resize）

---

进阶学习路线（循序渐进）

1. 吃透 ES6+ 全部语法
2. 作用域、闭包、this、原型链
3. 异步：事件循环 → Promise → async/await
4. DOM/BOM 高级、事件、本地存储
5. 数组高阶方法 + 深浅拷贝、防抖节流
6. Proxy/数据劫持、设计模式
7. 框架底层（Vue/React 原理）、Node.js 进阶