前端

一、JS相关

1. 数据类型

1.1 JavaScript 基本数据类型

1️⃣ Number

表示所有数字（包括整数、浮点数、NaN、Infinity）。

let a = 10;
let b = 3.14;
let c = NaN;        // 不是一个数字
let d = Infinity;   // 无穷大

2️⃣ String（字符串类型）

表示一段文本字符，使用 '...'、"..."、...。

let s = "hello";
let name = `Liu`;   // 模板字符串

字符串是不可变的，每次修改都会产生新字符串。

3️⃣ Boolean（布尔类型）

只有两个值：

true
false

用于逻辑判断。

4️⃣ Undefined

表示声明了变量但没有赋值。

let x;
console.log(x);  // undefined

5️⃣ Null

表示空值、刻意清空或不存在的对象。

let obj = null;

typeof null === "object" 是 JavaScript 的历史遗留 bug。

6️⃣ Symbol（ES6 新增）

表示唯一且不可重复的值，常用于对象的私有属性。

const id = Symbol("id");
const obj = {
  [id]: 123
};

每个 Symbol 都是独一无二的。

7️⃣BigInt（大整数类型，ES2020）

用于表示超过 Number 安全范围的整数。

let big = 123456789012345678901234567890n;

BigInt 必须带 n 后缀。

1.2 引用数据类型

JavaScript 中除 基本类型（Primitive Types） 之外，其余的都是 引用类型。常见的引用类型包括：

1️⃣ Object（对象）

最常用的引用类型，所有非基本类型都基于 Object。

const obj = { a: 1, b: 2 };

对象内部以 键值对结构 存储，可动态添加、删除属性。

2️⃣Array（数组）

数组本质上也是对象，但更适用于有序数据。

const arr = [1, 2, 3];

它是一个带有特殊属性（如 length）的对象，并且提供大量方法如 map、filter 等。

3️⃣ Function（函数）

JavaScript 中函数也是一种对象，称为 可调用对象。

function foo() {}
const bar = () => {};

函数对象不仅能被调用，还有自己的属性（如 name、length）。

4️⃣ Date（日期）

用于操作日期和时间。

const today = new Date();

5️⃣ RegExp（正则表达式）

const reg = /abc/gi;

6️⃣ Map / Set

ES6 引入的新集合类型：

Map

键值对结构，但 key 可以是任何类型（包括对象）。

const map = new Map();
map.set({ id: 1 }, "value");
map.get(key)
map.delete(key)

Set

不重复值集合。

const set = new Set([1, 2, 2]);
set.add(value)
set.has()
set.delete()

7️⃣ WeakMap / WeakSet

与 Map/Set 类似，但 key 必须是对象，并且是弱引用，不会阻止垃圾回收。

📌 引用类型的关键特点

1. 存储方式不同（堆 vs 栈）

基本类型：

➡️ 直接存储在 栈内存 中 ➡️ 变量保存的是 值本身

引用类型：

➡️ 数据存储在 堆内存 中

➡️ 变量保存的是 指向对象的引用地址（指针）

2. 复制方式不同（深浅拷贝问题）

const a = { name: "Liu" };
const b = a;
b.name = "Alan";

console.log(a.name);  // "Alan"

因为 a 与 b 指向同一个堆地址。

3. 比较方式不同

引用类型使用 引用地址 比较，而不是结构内容。

{} === {}   // false
[] === []   // false

1.3 类型判断方式

JavaScript 类型判断方式主要包含：typeof、instanceof、Object.prototype.toString 以及它们各自的优缺点、使用场景、底层原理。

1️⃣ typeof：判断基本类型（但有缺陷）

语法：

typeof value

✔ 能正确判断的类型：

typeof 1 === "number"
typeof "abc" === "string"
typeof true === "boolean"
typeof undefined === "undefined"
typeof Symbol() === "symbol"
typeof 123n === "bigint"
typeof function(){} === "function"

❌ 不能正确判断的地方：

typeof null === "object"   // ❌ bug，历史遗留问题
typeof [] === "object"     // ❌ 判不出数组
typeof {} === "object"     // ✔ 但和数组分不清
typeof new Date() === "object"
typeof /a/g === "object"

⭐ 使用场景：

• 判断基本类型（string/number/boolean...）
• 判断是否是 function

2️⃣ instanceof：判断对象类型（基于原型链）

语法：

value instanceof Constructor

✔ 能正确判断：

[] instanceof Array        // true
{} instanceof Object       // true
new Date() instanceof Date // true

⭐ instanceof 的原理

判断 value.__proto__ 是否能在构造函数的 prototype 链上找到。

源码解释（等价逻辑）：

value instanceof Constructor
// roughly equals
Constructor.prototype.isPrototypeOf(value)

❌ 不能用于判断基本类型：

1 instanceof Number       // false
"abc" instanceof String   // false

❌ 跨 iframe / 多全局环境会失效

value instanceof Array // false（跨 window 环境）

⭐ 使用场景：

• 判断对象的具体构造函数类型
• 用在 class / 自定义对象类型判断

3️⃣ Object.prototype.toString.call(): 最准确的类型判断方式

最常用于深度判断类型：

语法：

Object.prototype.toString.call(value)

示例：

Object.prototype.toString.call(1)            // "[object Number]"
Object.prototype.toString.call("a")          // "[object String]"
Object.prototype.toString.call(null)         // "[object Null]"
Object.prototype.toString.call(undefined)    // "[object Undefined]"
Object.prototype.toString.call([])           // "[object Array]"
Object.prototype.toString.call({})           // "[object Object]"
Object.prototype.toString.call(new Date())   // "[object Date]"
Object.prototype.toString.call(/a/)          // "[object RegExp]"
Object.prototype.toString.call(() => {})     // "[object Function]"
Object.prototype.toString.call(new Map())    // "[object Map]"
Object.prototype.toString.call(new Set())    // "[object Set]"

✔ 为什么它是最准的？

因为这是 JS 内部 [[Class]] 属性的官方展示方式，不会受原型链、跨 iframe 影响。

⭐ 使用场景：

• 判断所有类型（尤其是数组、null、Date、RegExp）
• 完全准确 → 面试官最喜欢

🔥 三者对比总结表（最重要面试知识点）

🔥 实际开发中怎么用？（公式）

🚀 判断数组（最经典）

✔ 推荐：

Array.isArray(value)

✔ 或：

Object.prototype.toString.call(value) === "[object Array]"

🚀 判断 null

Object.prototype.toString.call(value) === "[object Null]"

🚀 判断对象（纯对象）

Object.prototype.toString.call(value) === "[object Object]"

🚀 判断日期

value instanceof Date
Object.prototype.toString.call(value) === "[object Date]"

🚀 判断函数

typeof value === "function"

🔥 一句话带你记住：

• typeof：判断 基本类型
• instanceof：判断 对象是否由某构造函数创建
• toString.call：判断 所有类型，最准确

2. 隐式转换

2.1 JS 转换规则

JavaScript 的隐式转换主要涉及三种方向：

1️⃣ 转换为 Boolean（布尔值）

以下 7 种值会被转为 false，其他全部为 true：

示例：

if ("") console.log("不会执行");
if ("hello") console.log("会执行");

2️⃣ 转换为 Number

常见场景：

（1）字符串 → 数字

Number("123")  // 123
Number("")     // 0
Number("   ")  // 0（注意，这点容易忽略）
Number("123px") // NaN

（2）布尔 → 数字

Number(true)  // 1
Number(false) // 0

（3）null / undefined

Number(null)      // 0
Number(undefined) // NaN

（4）对象 → 数字

对象先执行：

valueOf() → primitive
toString() → primitive
再转为 number
Number([])   // 0
Number([1])  // 1
Number({})   // NaN

3️⃣转换为 String（字符串）

String(123)   // "123"
String(true)  // "true"
String(null)  // "null"
String([])    // ""
String([1,2]) // "1,2"

✅ 常见隐式转换场景（重点）

1. 加号运算（+）

规则非常重要：

如果其中一个是字符串 → 字符串拼接

1 + "2"   // "12"
true + "1" // "true1"

如果都是数字 → 数字相加

1 + 2 // 3

对象参与 + 运算 → 转为原始类型

[] + []       // "" + "" → ""
[] + {}       // "" + "[object Object]"
{} + []       // 0
[] + 1              //"1"
{} + 1              //1 这是因为js语法解析到{}时，将其作为了一个空代码块
( {} + 1 )      //'[object Object]1'

2. 减号（-）、乘号（*）、除号（/）始终转为数字

"3" - 1   // 2
"3" * 2   // 6
"3" / 2   // 1.5
"3px" - 1 // NaN

也就是说，只有 + 会触发字符串拼接，其他都转数字。

3. 比较运算 ==（宽松相等）

JS 中最混乱的部分之一。

（1）数字 == 字符串 → 字符串转数字

1 == "1"  // true

（2）布尔 == 数字 → 布尔转数字

true == 1  // true
false == 0 // true

（3）null 只与 undefined 相等

null == undefined // true
null == 0         // false
undefined == 0    // false

（4）对象 == 原始值：对象先转换为原始值

[] == ""  // true
[] == 0   // true
[1] == 1  // true

（5）特例：

[] == ![] // true

// 分析流程：
![] → false
[] == false
false → 0
[] → 0
0 == 0 → true

⚠️ Falsy（假值）只有 7 个

false
0
-0
""
null
undefined
NaN

2.2 原始值转换

JavaScript 共有 7 种原始类型：

类型	示例	说明
number	1, 3.14	数字
string	"hello"	字符串
boolean	true / false	布尔
null	null	空值
undefined	undefined	未定义
symbol	Symbol()	唯一值
bigint	10n	大整数

1️⃣ 为什么对象要执行 ValueOf / toString？

当对象参与运算，例如：

{} + 1
[1,2] + 3

JS 需要把对象变成 原始值（number/string） 才能计算。

这个转换过程叫：

ToPrimitive（对象 → 原始类型）

执行顺序如下：

如果对象自定义了 Symbol.toPrimitive：
    直接调用它
否则：
    如果是数字运算 → 调用 valueOf() → 再调用 toString()
    如果是字符串运算 → 调用 toString() → 再调用 valueOf()

2️⃣ 完整优先级（最重要！）

🥇 1. Symbol.toPrimitive

对象有 Symbol.toPrimitive 时，最高优先级，直接用它的返回值。

const obj = {
  [Symbol.toPrimitive](hint) {
    console.log(hint)
    return 10;
  }
}

console.log(obj + 1); // 输出 hint: "default" → 11

hint 有三种：

• number → 数字运算
• string → 字符串上下文
• default → 加号 + 等不明确情况

🥈 2. 没有 Symbol.toPrimitive → 执行 valueOf()

valueOf 只能返回：

• 原始值（如 1、"abc"）
• 或者对象（继续下一步）

常见例子：

const obj = {
  valueOf() {
    return 20;
  }
}

console.log(obj + 1) // 21（直接用 valueOf 结果）

🥉 3. valueOf 不行 → 调用 toString()

如果 valueOf 返回对象，那么继续执行 toString。

const obj = {
  valueOf() {
    return {}; // 无效
  },
  toString() {
    return "100";
  }
}

console.log(obj + 1) // "1001"（字符串拼接）

🟦 不同运算符的 ToPrimitive 顺序

JS 根据运算类型决定 ToPrimitive 的 hint：

特别注意：

加号不是纯数字运算，所以 hint 是 "default"。

🧪 经典例子

❗例 1：对象相加

{} + {}

不同解释器下结果会不同，但通常：

"[object Object][object Object]"

原因：

1. 对象没有 valueOf 结果（返回原对象）
2. 调用 toString → "object Object"
3. 拼接成字符串

❗例 2：数组的 valueOf 和 toString

数组的 valueOf 返回 自身（对象），无效。

所以数组只能用 toString 转换：

[] + 1        // "" + 1 → "1"
[1,2] + 3     // "1,2" + 3 → "1,23"

❗例 3：对象控制自身的运算结果

let obj = {
  value: 0,
  valueOf() {
    return ++this.value;
  }
}

console.log(obj == 1); // true
console.log(obj == 2); // true
console.log(obj == 3); // true

利用 valueOf 可以让对象“变魔术”。

❗例 4：更现代的方式：Symbol.toPrimitive

let obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return 100;
    if (hint === "string") return "Hello";
    return 50; // default
  }
}

console.log(+obj);     // 100
console.log(String(obj)); // "Hello"
console.log(obj + 1);  // 51

3. 作用域

var 是早期 JS 的遗留设计， let / const 是为了解决作用域混乱、提升可维护性而引入的 ES6 方案。

3.1 作用域概述

1️⃣ JS 中的作用域类型

全局作用域（Global）
函数作用域（Function）
块级作用域（Block） ← ES6 新增

2️⃣ 执行上下文

每次代码执行，都会创建一个 Execution Context：

Execution Context = {
  Variable Environment,
  Lexical Environment,
  This Binding
}

• var → Variable Environment
• let / const → Lexical Environment

👉 这是所有差异的根源。

3.2 var、let、const

3.2.1var：函数作用域 + 变量提升

1️⃣ 作用域规则

if (true) {
  var a = 1;
}
console.log(a); // 1

👉 var 没有块级作用域

2️⃣ 变量提升（Hoisting）

console.log(x); // undefined
var x = 10;

等价于：

var x;
console.log(x);
x = 10;

📌 提升的是声明，不是赋值

3️⃣ 全局污染

var a = 1;
console.log(window.a); // 1

• 挂载到 window
• 可被 delete
• 极易冲突

3.2.2 let：块级作用域 + 暂时性死区

1️⃣ 块级作用域

if (true) {
  let a = 1;
}
console.log(a); // ReferenceError

2️⃣ 暂时性死区（TDZ）

console.log(a); // ReferenceError
let a = 1;

📌 即使看起来在声明之前，也不能访问

这是为了防止使用未初始化的变量。

3️⃣ 全局 let 的特殊性（你之前的问题）

let a = 1;
console.log(window.a); // undefined

• 存在于 全局词法环境
• 不是 window 的属性
• 不能被 delete

3.2.3 const

1️⃣ 基本规则

const a = 1;
a = 2; // TypeError

2️⃣ 引用类型是“引用不可变”

const obj = { x: 1 };
obj.x = 2; // ✅
obj = {};  // ❌

3️⃣ 必须初始化

const a; // SyntaxError

4️⃣ 作用域 & TDZ

• 和 let 完全一致
• 同样有 TDZ

‼️ 三者的核心差异对比（必背）

3.3 作用域链

作用域链（Scope Chain）到底是什么？

let a = 1;

function foo() {
  let b = 2;
  function bar() {
    console.log(a + b);
  }
  bar();
}
foo();

‼️ 查找规则

1. 当前作用域
2. 外层作用域
3. 全局作用域
4. 报错

👉 这是 JS 词法作用域（Lexical Scope）

4. 继承

JS 的“继承”不是一套，而是多套历史叠加的机制。如果你只记住一句话：

JavaScript 的继承本质是：对象通过「原型链」复用属性和方法。

⚠️ 先搞清楚：JS 和 Java 的继承“完全不是一回事”

JS 中：

• 没有“真正的类”（ES6 之前）
• 一切继承都靠对象的 [[Prototype]]

4.1 原型与原型链

1️⃣ 三个你必须分清的东西

function Person() {}
const p = new Person()

（1）Person.prototype

• 构造函数的 原型对象
• 所有实例共享的方法放这里

（2）p.__proto__

• 实例内部的隐藏指针
• 指向 Person.prototype

（3）constructor

• 指回构造函数

关系图：

child
  └── __proto__ → Parent.prototype
                        └── constructor → Parent
                        └── __proto__ → Object.prototype

2️⃣ 原型链查找规则

p.say()

查找顺序：

1. p 自身
2. p.proto
3. p.proto.proto
4. ...直到 null

👉 这条链就是“继承链”

4.2 ES5 时代的继承方式

1️⃣ 原型链继承

function Parent() {
  this.name = 'parent'
}

Parent.prototype.say = function () {
  console.log(this.name)
}

function Child() {}

Child.prototype = new Parent()

优点

• 简单
• 方法复用

缺点（致命）

• 引用类型共享
• 无法传参

2️⃣ 构造函数继承（借用构造函数）

function Parent(name) {
  this.name = name
}

function Child(name) {
  Parent.call(this, name)
}

优点

• 可以传参
• 不共享引用属性

缺点

• 方法不能复用
• 每个实例一份方法

3️⃣ 组合继承

function Parent(name) {
  this.name = name
}

Parent.prototype.say = function () {}

function Child(name) {
  Parent.call(this, name)
}

Child.prototype = new Parent()

问题

• Parent 构造函数 调用两次
• 多余属性

4️⃣ 寄生组合继承（最优 ES5 方案）

// ====== 父类构造函数 ======
function Parent(name) {
  this.name = name          // 实例属性，每个对象独立
  this.colors = ['red', 'blue'] // 引用类型属性
}

// 父类原型方法
Parent.prototype.sayName = function() {
  console.log('My name is ' + this.name)
}

// ====== 子类构造函数 ======
function Child(name, age) {
  // 借用构造函数：解决引用类型属性共享问题
  Parent.call(this, name)
  this.age = age
}

// ====== 寄生组合继承核心 ======
// 创建一个父类原型的副本，并赋给子类原型
Child.prototype = Object.create(Parent.prototype)

// 修正 constructor 指向
Child.prototype.constructor = Child

// 给子类原型添加方法
Child.prototype.sayAge = function() {
  console.log('My age is ' + this.age)
}

// ====== 测试 ======
const child1 = new Child('Alice', 10)
const child2 = new Child('Bob', 12)

// 测试实例属性独立性
child1.colors.push('green')
console.log(child1.colors) // ['red', 'blue', 'green']
console.log(child2.colors) // ['red', 'blue']

// 测试原型方法继承
child1.sayName() // My name is Alice
child2.sayName() // My name is Bob
child1.sayAge()  // My age is 10
child2.sayAge()  // My age is 12

// 测试原型链关系
console.log(child1 instanceof Child)  // true
console.log(child1 instanceof Parent) // true

✅ Object.create 是 ES5 引入的一个方法，本质上就是创建一个新对象，并指定它的原型。

1️⃣ 语法

const obj = Object.create(proto, [propertiesObject])

• proto：新对象的原型对象
• propertiesObject（可选）：类似 Object.defineProperties 的属性描述符对象

2️⃣ 简单例子

const parent = { name: 'parent' }
const child = Object.create(parent)

console.log(child.name) // 'parent'
console.log(child.__proto__ === parent) // true

原理：

1. child.__proto__ 指向 parent
2. 访问不存在的属性 → 浏览器沿原型链查找
3. 原型链就是“继承”的本质

4.3 ES6 class 继承

1️⃣ 基本用法

class Parent {
  constructor(name) {
    this.name = name
  }

  say() {
    console.log(this.name)
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name)
    this.age = age
  }
}

2️⃣ extends 做了什么？

Child.__proto__ === Parent        // true（静态继承）
Child.prototype.__proto__ === Parent.prototype // true（实例继承）

👉 双重原型链

3️⃣ 为什么必须先 super()？

constructor() {
  super()
  this.x = 1
}

原因：

• super() 本质是 Parent.call(this)
• 不调用就没有 this

4.4 多继承

在 JavaScript 中，严格意义上是不支持多继承的。也就是说，一个对象或类只能有一个直接原型（一个 [[Prototype]]），所以无法像 Java 或 C++ 那样直接继承多个父类。

但 JS 有多种方式可以实现“类似多继承”的效果，尤其在 ES6 之后更加优雅。我们从底层原理和实际方案来看。

⚠️ 为什么 JS 不支持多继承？

JS 的继承本质是原型链继承：

child.__proto__ → Parent.prototype → Object.prototype → null

• __proto__ 是一个指针
• 一条对象只能指向一个原型
• 所以无法有两个父类直接被继承

常见解决方案

1️⃣ 混入（Mixin）

思想：把其他对象的方法“拷贝”到子类原型上

const canEat = {
  eat() { console.log('Eating') }
}

const canWalk = {
  walk() { console.log('Walking') }
}

class Person {
  constructor(name) {
    this.name = name
  }
}

// 混入方法
Object.assign(Person.prototype, canEat, canWalk)

const p = new Person('Alice')
p.eat()  // Eating
p.walk() // Walking

• ✅ 可以模拟多继承行为
• ✅ 简单，企业项目常用
• ❌ 不能继承父类构造函数属性，需要手动初始化

2️⃣ 高阶函数式继承（Mixin 函数）

const Eater = (Base) => class extends Base {
  eat() { console.log('Eating') }
}

const Walker = (Base) => class extends Base {
  walk() { console.log('Walking') }
}

// 基础类
class Person {
  constructor(name) { this.name = name }
}

// 多继承组合
class SuperPerson extends Eater(Walker(Person)) {}

const sp = new SuperPerson('Bob')
sp.eat()  // Eating
sp.walk() // Walking

• ✅ 保留了构造函数链
• ✅ ES6 风格
• ✅ 企业中很多库（如 React 高阶组件 HOC）就是这种思想
• ❌ 构造函数初始化顺序需要注意

3️⃣ 组合优先于继承（推荐）

• 面向对象设计里 “组合优于继承”
• 通过对象属性引用其他对象来复用功能，而不是继承

function createPerson(name) {
  return {
    name,
    eater: { eat() { console.log('Eating') } },
    walker: { walk() { console.log('Walking') } }
  }
}

const p = createPerson('Alice')
p.eater.eat()
p.walker.walk()

• ✅ 非常灵活
• ✅ 避免深层原型链复杂性
• ✅ React / Vue / MobX 代码里很常见

总结

5.异步

5.1 Event loop

JavaScript 是单线程的：

• 同一时间只能执行一段 JS
• 但要处理：
  • 网络请求
  • 定时器
  • 用户交互
  • 文件 I/O（Node）

👉 事件循环的目标：

在单线程的前提下，实现“非阻塞”的异步执行模型。

JS 执行模型总览（浏览器 & Node 通用）

核心组成

1. Call Stack（调用栈）
2. Heap（堆，存对象）
3. 任务队列（Queues）
   • 宏任务（MacroTask）
   • 微任务（MicroTask）
4. Event Loop（事件循环）

5.1.1 浏览器环境的事件循环

1️⃣ 浏览器中的任务类型

宏任务（MacroTask）

常见来源：

• script（整体代码）
• setTimeout
• setInterval
• setImmediate（极少见）
• MessageChannel
• I/O
• UI 事件（click、scroll）

微任务（MicroTask）

• Promise.then / catch / finally
• MutationObserver
• queueMicrotask

2️⃣ 浏览器事件循环执行流程

1. 执行一个宏任务（比如 script）
2. 执行过程中：
   - 同步代码入栈执行
   - 异步任务注册回调
3. 当前宏任务执行完毕
4. 清空所有微任务队列
5. UI 渲染（如有需要）
6. 进入下一个宏任务

3️⃣ UI 渲染与微任务的关系（高频考点）

微任务会阻塞 UI 渲染

Promise.resolve().then(function loop() {
  console.log('microtask')
  Promise.resolve().then(loop)
})

🔴 后果：

• 浏览器一直在清空微任务
• UI 永远无法渲染
• 页面卡死

5.1.2 Node.js 事件循环

宏任务队列（Macrotask Queue）

• 每个事件循环阶段都有自己的宏任务队列
• 阶段示例：
  • timers → setTimeout / setInterval
  • pending callbacks → I/O 回调
  • poll → 大部分 I/O 回调
  • check → setImmediate
  • close callbacks → socket.on('close')

微任务队列（Microtask Queue）

• Node 中微任务有两类：
  • process.nextTick → 优先级最高，当前阶段末尾立即执行
  • Promise.then / queueMicrotask → 当前宏任务结束后执行

Node 事件循环是分阶段的，每个阶段有自己的宏任务队列，每个阶段宏任务执行完后，会清空微任务队列（先 nextTick，再 Promise.then/queueMicrotask），然后进入下一阶段。

libuv 把事件循环拆成 6 个阶段（Phase）

┌─────────────────────────┐
│ timers                  │ ① 定时器阶段
├─────────────────────────┤
│ pending callbacks       │ ② 延迟回调
├─────────────────────────┤
│ idle, prepare           │ ③ 内部阶段
├─────────────────────────┤
│ poll                    │ ④ I/O 阶段（核心）
├─────────────────────────┤
│ check                   │ ⑤ setImmediate
├─────────────────────────┤
│ close callbacks         │ ⑥ 关闭回调
└─────────────────────────┘

一句话理解

Node 在一个 while 循环里，按顺序反复执行这 6 个阶段

‼️每一个 Phase 到底在干什么（重点）

① timers 阶段（定时器）

• setTimeout
• setInterval

⚠️ 不是“时间一到立刻执行”

而是：

时间到了 → 放进 timers 队列 → 等轮到这个阶段才执行

常见误区

setTimeout(fn, 0)

❌ 不是立即执行 ✅ 只是“最早下一轮 timers 阶段可执行”

② pending callbacks 阶段

• 某些系统级回调
• TCP 错误回调

👉 你几乎用不到 👉 但它解释了为什么 Node 需要拆阶段

③ idle / prepare

• libuv 内部使用
• 开发者无需关心

④ poll 阶段（灵魂阶段）

Node 事件循环最重要的阶段

poll 阶段做两件事：

1. 执行 I/O 回调
   • fs
   • net
   • http
2. 决定是否阻塞等待

poll 阶段的决策逻辑（非常关键）

如果 poll 队列有回调：
  → 执行回调
否则：
  如果有 setImmediate：
    → 进入 check 阶段
  如果没有：
    → 阻塞等待新的 I/O

⚠️ 这就是为什么 Node 非常高效 👉 线程不空转

⑤ check 阶段（setImmediate）

执行什么？

• setImmediate

设计目的

给 I/O 回调一个“立即执行”的机会

也就是说：

fs.readFile(..., () => {
  setImmediate(() => {})
})

👉 一定在 本轮事件循环执行

⑥ close callbacks 阶段

执行什么？

• socket.on('close')
• server.close()

用于资源清理

⚠️ Node 的“微任务系统”

Node 里有 两套微任务机制

1️⃣ process.nextTick（最高优先级）

特点

• 不属于 libuv
• 属于 Node 自己的机制
• 在每一个 phase 结束后立刻执行

优先级：

process.nextTick
⬆⬆⬆
Promise.then
⬆
下一阶段

危险点

function tick() {
  process.nextTick(tick)
}
tick()

🚨 事件循环直接被饿死

2️⃣ Promise 微任务（标准）

• Promise.then
• queueMicrotask

执行时机

每一个 phase 结束时，清空一次

完整执行流程（从头到尾）

我们来一段 终极流程

1. 执行主脚本（script）
2. 清空 nextTick
3. 清空 Promise
4. 进入 event loop
5. timers 阶段
   - 执行到期定时器
   - 清空 nextTick
   - 清空 Promise
6. pending callbacks
7. idle/prepare
8. poll
   - 执行 I/O 回调
   - 清空 nextTick
   - 清空 Promise
9. check
   - 执行 setImmediate
   - 清空 nextTick
   - 清空 Promise
10. close callbacks

然后 回到 timers，继续下一轮

浏览器 vs Node.js 差异总结（面试必答）

5.2 Promise

6. 事件传播

浏览器中的事件传播（Event Propagation）分为 三个阶段：

捕获阶段 → 目标阶段 → 冒泡阶段

‼️ 事件传播完整流程（面试重点）

假设 DOM 结构：

<div id="outer">
  <div id="inner">
    <button id="btn">Click</button>
  </div>
</div>

当你点击 button 时：

实际传播顺序

window
 ↓ 捕获
document
 ↓
html
 ↓
body
 ↓
#outer
 ↓
#inner
 ↓
#btn   ← 目标阶段
 ↑
#inner
 ↑ 冒泡
#outer
 ↑
body
 ↑
html
 ↑
document
 ↑
window

📌 先捕获，再冒泡

⚠️ 如何监听捕获 / 冒泡阶段的事件？

1️⃣ addEventListener 第三个参数

element.addEventListener(
  'click',
  handler,
  true   // 捕获阶段
)
element.addEventListener(
  'click',
  handler,
  false  // 冒泡阶段（默认）
)

等价写法（推荐）：

element.addEventListener('click', handler, {
  capture: true
})

2️⃣ 示例：捕获 vs 冒泡

outer.addEventListener('click', () => {
  console.log('outer capture')
}, true)

outer.addEventListener('click', () => {
  console.log('outer bubble')
})

btn.addEventListener('click', () => {
  console.log('button')
})

点击 btn 输出顺序：

outer capture
button
outer bubble

⚠️ event 对象中的关键属性（面试高频）

event.target        // 实际触发事件的元素
event.currentTarget // 当前正在处理事件的元素
event.eventPhase    // 所处阶段

eventPhase 值

⚠️ 阻止事件传播（非常重要）

1️⃣ 阻止冒泡（不影响默认行为）

event.stopPropagation()
event.stopImmediatePropagation() // 连同同级监听器一起阻止

2️⃣ 阻止默认行为

event.preventDefault()

📌 preventDefault ≠ stopPropagation

⚠️ 哪些事件不冒泡？

以下事件 不冒泡（但大多支持捕获）：

• focus
• blur
• mouseenter
• mouseleave
• load
• unload

替代方案：

⚠️ 事件委托（捕获 & 冒泡的核心应用）

为什么需要事件委托？

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

❌ 给每个 li 绑定事件（浪费）

✅ 利用冒泡：

list.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    console.log(e.target.innerText)
  }
})

📌 事件委托依赖的是冒泡机制

事件捕获的真实使用场景

⚠️ React / Vue 中的事件机制（面试加分）

1️⃣ React（合成事件）

React 使用 事件委托 + 冒泡， 在根节点统一监听事件。

特点：

• React 17+ 绑定在 root
• onClickCapture 支持捕获

<div onClickCapture={() => console.log('capture')}
     onClick={() => console.log('bubble')}>

2️⃣ Vue

• Vue 2：事件代理到 document
• Vue 3：代理到 组件根节点

修饰符：

@click.capture="onCapture"
@click.stop="onStop"
@click.prevent="onPrevent"

4. 函数柯里化

1️⃣ 什么是函数柯里化？

函数柯里化就是把一个多参数函数， 转化成多个单参数函数的过程。

简单来说：

一个接受多个参数的函数 → 变成一系列每次只接受一个参数的函数。

📌 例子对比

普通函数：

function add(a, b) {
  return a + b;
}

console.log(add(2, 3)); // 5

柯里化后的函数：

function add(a) {
  return function(b) {
    return a + b;
  }
}

console.log(add(2)(3)); // 5

• 原来一次传两个参数 → 现在分两次传，每次一个参数。
• add(2) 返回一个函数，等待第二个参数 b。

2️⃣ 使用箭头函数写柯里化

const add = a => b => a + b;

console.log(add(2)(3)); // 5

箭头函数写法更加简洁，每一层都是一个返回函数。

3️⃣ 多参数函数柯里化

const multiply = a => b => c => a * b * c;

console.log(multiply(2)(3)(4)); // 24

• 这里函数 multiply 一次只能接收一个参数，但可以链式调用。
• 柯里化的好处：可以灵活复用参数。

4️⃣ 实际应用场景

a. 参数复用

const add10 = add(10);
console.log(add10(5)); // 15
console.log(add10(20)); // 30

• 先固定一个参数 10 → 得到一个新的函数 add10，可以多次调用。

b. 函数组合 & 高阶函数

const log = prefix => message => console.log(`${prefix}: ${message}`);

const info = log("INFO");
const warn = log("WARN");

info("This is info"); // INFO: This is info
warn("This is warning"); // WARN: This is warning

• 柯里化让我们更容易封装功能、固定参数。

5️⃣ 通用柯里化工具函数

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args); // 参数足够直接执行
    } else {
      return function(...next) {
        return curried.apply(this, args.concat(next));
      }
    }
  }
}

// 使用
function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6
console.log(curriedSum(1, 2)(3)); // 6

• fn.length 是函数声明时的参数个数。
• 可以实现任意函数的柯里化。
• 支持一次传一个或多个参数，比较灵活。

🔑 总结

• 概念：把多参数函数 → 变成一系列单参数函数。
• 语法：
  • 普通函数：

    function add(a) { return function(b) { return a + b; } }
    

  • 箭头函数：

    const add = a => b => a + b;
    

• 优势：
  1. 参数复用（partial application）
  2. 高阶函数组合
  3. 更灵活、函数式编程风格

1. 设计模式

1.1 创建型设计模式

1️⃣ 工厂模式（Factory Pattern）

👉 用于封装创建对象的逻辑，让创建对象更灵活。

示例：创建不同类型的用户

class User {
  constructor(name, role) {
    this.name = name;
    this.role = role;
  }
}

class UserFactory {
  static createUser(name, role) {
    switch (role) {
      case 'admin':
        return new User(name, 'admin');
      case 'editor':
        return new User(name, 'editor');
      default:
        return new User(name, 'guest');
    }
  }
}

const u1 = UserFactory.createUser('Tom', 'admin');
const u2 = UserFactory.createUser('Jerry', 'guest');

📌 什么时候用？ 角色、类型不确定，未来可能扩展时。

2️⃣ 单例模式（Singleton Pattern）

👉 全局只有一个实例。常用于全局状态管理。

示例：全局缓存管理

class Cache {
  constructor() {
    if (Cache.instance) return Cache.instance;
    this.store = {};
    Cache.instance = this;
  }
  set(key, value) {
    this.store[key] = value;
  }
  get(key) {
    return this.store[key];
  }
}

const c1 = new Cache();
const c2 = new Cache();
console.log(c1 === c2); // true

📌 什么时候用？ 全局配置、Vuex Store、EventBus、全局缓存。

3️⃣ 原型模式（Prototype）

👉 通过对象克隆创建新对象，性能好。

示例：创建多个相似对象

const personPrototype = {
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

const person = Object.create(personPrototype);
person.name = 'Tom';
person.greet();

1.2 结构型设计模式

1️⃣ 适配器模式（Adapter）

👉 把一个类的接口转换成另一个期望的接口。

示例：适配旧接口数据结构

const oldApiData = { username: 'Tom', age: 19 };

function adapter(data) {
  return {
    name: data.username,
    age: data.age
  };
}

const user = adapter(oldApiData);

📌 常用于：接入不同 API、兼容老系统、改造后端数据格式

2️⃣ 装饰器模式（Decorator）

👉 在不修改原对象的情况下扩展功能。

示例：增强函数行为

function logDecorator(fn) {
  return function (...args) {
    console.log('调用前: ', args);
    const result = fn.apply(this, args);
    console.log('调用后: ', result);
    return result;
  }
}

function sum(a, b) {
  return a + b;
}

const loggedSum = logDecorator(sum);
loggedSum(1, 2);

📌 实际用途：

• Vue/React 中的高阶组件 HOC
• 权限检查
• 节流/防抖增强

3️⃣代理模式（Proxy）

👉 控制对对象的访问，例如性能优化、懒加载、数据校验。

示例：ES6 Proxy 实现数据校验

const user = {
  name: '',
  age: 0
};

const userProxy = new Proxy(user, {
  set(target, key, value) {
    if (key === 'age' && value < 0) {
      throw new Error('年龄不能为负数');
    }
    target[key] = value;
    return true;
  }
});

📌 Vue3 就基于 Proxy。

4️⃣ 外观模式（Facade Pattern）

👉 对复杂系统提供简单接口。

示例：封装复杂 DOM 操作

const DOMHelper = {
  create(tag, text) {
    const el = document.createElement(tag);
    el.textContent = text;
    document.body.appendChild(el);
  }
};

DOMHelper.create('p', 'Hello World');

5️⃣ 组合模式（Composite）

👉 用于树形结构。

示例：前端菜单结构

class MenuItem {
  constructor(name) {
    this.name = name;
  }
  display() {
    console.log(this.name);
  }
}

class Menu {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  add(child) {
    this.children.push(child);
  }
  display() {
    console.log(this.name);
    this.children.forEach(c => c.display());
  }
}

1.3 行为型设计模式

1️⃣ 观察者模式（Observer）

👉 对象之间一对多通知，经典：事件监听、发布订阅。

示例：简单事件系统

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

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

  emit(event, data) {
    (this.events[event] || []).forEach(fn => fn(data));
  }
}

const bus = new EventBus();
bus.on('login', user => console.log('用户登录', user));
bus.emit('login', { name: 'Tom' });

📌 Vue2 就是基于它（$on / $emit）

2️⃣ 发布订阅模式（Pub/Sub）

👉 与 Observer 的区别：有事件中心，发布者与订阅者不直接关联。

EventBus 更像 Pub/Sub。

3️⃣ 策略模式（Strategy Pattern）

👉 将多个策略独立封装起来，让调用者自动选择策略。

示例：表单校验

const strategies = {
  required(value) {
    return value ? '' : '必填';
  },
  minLength(value, length) {
    return value.length >= length ? '' : `最少 ${length} 位`;
  }
};

function validate(value, rules) {
  for (const rule of rules) {
    const [name, ...params] = rule;
    const msg = strategies[name](value, ...params);
    if (msg) return msg;
  }
}

📌 用于：表单校验、算法切换、不同渲染策略

4️⃣ 命令模式（Command）

👉 把行为封装为对象，可撤销/重做。

示例：富文本编辑器撤销功能

class CommandManager {
  constructor() {
    this.history = [];
  }
  execute(cmd) {
    cmd.execute();
    this.history.push(cmd);
  }
  undo() {
    const last = this.history.pop();
    last.undo();
  }
}

2.闭包

2.1 闭包概述

1️⃣ 什么是闭包？

闭包（Closure） 是指： 函数 + 它能够访问的词法作用域 形成的整体。

换句话说，当一个函数被定义时，它会“记住”自己所在的作用域，即使这个函数在作用域外执行，它依然能访问当初作用域中的变量。

2️⃣ 为什么会有闭包？

在 JavaScript（还有 Python 等语言）中，作用域是词法作用域（Lexical Scope），也就是函数在定义时决定了能访问哪些变量，而不是在调用时决定。

闭包就是这种机制的自然结果： 即使外层函数执行结束，它的变量本应被销毁，但只要有内部函数“引用”了这些变量，那么它们就会被保留下来。

一个例子

function makeCounter() {
  let count = 0; // 外层函数的局部变量

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

const counter1 = makeCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2
console.log(counter1()); // 3

这里发生了什么？

• makeCounter() 执行后，按理说它的局部变量 count 应该消失。
• 但 return 出去的匿名函数引用了 count，所以 count 被保留了。
• 每次调用 counter1()，都能访问并修改同一个 count。 👉 这就是 闭包。

3️⃣ 闭包的常见用途

• 数据封装 隐藏内部变量，只暴露需要的接口。

function createUser(name) {
  let password = "secret"; // 私有变量
  return {
    getName: () => name,
    checkPassword: (pwd) => pwd === password
  };
}

• 函数工厂 根据传入参数生成不同的函数。

function multiplier(factor) {
  return function(x) {
    return x * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

• 回调 / 异步操作 在定时器、事件监听器中保持对外部变量的访问。

5. 注意点

• 内存泄漏风险 如果闭包引用了很大的对象，就会阻止垃圾回收。
• 调试难度 变量“消失又存在”，有时不容易追踪。
• 性能问题 太多闭包可能导致额外的内存开销。

2.2 闭包的内存泄露

🔍 闭包为什么会导致内存问题？

闭包会出现内存问题，通常满足三个条件：

1. 你创建了闭包
2. 闭包持有大量数据（数组、DOM、对象等）
3. 你长期持有这个闭包的引用 → 外层变量一直无法释放

✔ 举个导致内存泄漏的例子：

function createBigClosure() {
  const arr = new Array(10 * 1024 * 1024).fill("*"); // 占用大量内存

  return function() {
    console.log(arr[0]);
  }
}

const leak = createBigClosure(); // arr 即使不用，也永远不会被释放

这里因为你把内部函数（闭包）赋值给 leak，导致外层的大数组 arr 一直在内存里。

即使你不再用它，它也不会释放。

🔥 闭包 vs 普通函数的内存行为

❌ 普通函数执行完就释放：

function foo() {
  let a = 1;
}
foo();
// a 被回收

❗ 闭包保留变量：

function foo() {
  let a = 1;
  return function() { console.log(a); }
}

const bar = foo();
// a 不会被回收

💡 闭包什么时候会真正引发“内存泄漏”？

闭包本身不是泄漏，泄漏必须满足：

• 变量本应该释放，但没有释放
• 且永远无法访问到（或不再被需要）

一些常见场景：

🧨 情况一：闭包引用了 DOM 节点，却忘记解除绑定

function bind() {
  const bigDom = document.getElementById('big');
  bigDom.addEventListener('click', function() {
    console.log(bigDom);
  });
}

如果 bigDom 被删除：

• 事件监听器依然保持引用链
• GC 无法释放

→ 这是前端最常见的闭包泄漏场景之一。

🧨 情况二：计时器中的闭包未清除

function start() {
  let data = { big: new Array(10000000) };
  setInterval(() => {
    console.log(data.big.length);
  }, 1000);
}
start();

因为 setInterval 永远存在，所以闭包变量 data 永远不会被释放。

🧨 情况三：长生命周期对象（如全局变量）引用了闭包

let cache;

function create() {
  const data = new Array(10000000);
  cache = function() { console.log(data); };
}

create(); // data 永远无法释放

⭐ 如何避免闭包造成的内存问题？

✔ 1. 不再使用的闭包置空

cache = null;

这样 GC 会自动清理其引用的外层变量。

✔ 2. 在大型应用中谨慎使用 setInterval，记得 clearInterval

const timer = setInterval(() => {}, 1000);
// ...
clearInterval(timer);

✔ 3. 事件监听记得解绑（尤其是大型 DOM）

bigDom.removeEventListener('click', handler);

✔ 4. 不要在闭包中保存大型对象，尽量保存必要数据

// bad
function foo(bigObj) {
  return () => console.log(bigObj);
}

// good
function foo({ id }) {
  return () => console.log(id);
}

✔ 5. 使用弱引用（WeakMap / WeakSet）避免引用链阻止 GC

例如缓存对象：

const wm = new WeakMap();

function cache(obj) {
  wm.set(obj, "cached");
}

WeakMap 的 key 不影响对象垃圾回收。

5. 原型链

6. this

this 的指向由“调用方式（call site）”决定，而不是定义位置（除了箭头函数）。 常见的规则：默认绑定 → 隐式/对象绑定 → 显式绑定（call/apply/bind） → new 绑定。箭头函数例外：它没有自己的 this，使用定义时的词法 this（lexical this）。

1️⃣ 默认绑定（Default binding）

• 规则：普通函数直接调用时，非严格模式下 this 指向全局对象（浏览器中是 window）；严格模式下 this 为 undefined。
• 示例：

function foo() {
  console.log(this);
}
foo(); // non-strict: window (浏览器)；strict: undefined

• 注意：在 ES module、CommonJS 模块、类方法中默认处于严格模式，所以 this 多为 undefined。

2️⃣ 隐式绑定（Implicit / Object binding）

• 规则：通过 obj.method() 调用时，this 指向调用点左边的对象 obj。
• 示例：

const obj = {
  x: 1,
  getX() { return this.x; }
};
console.log(obj.getX()); // 1

• 常见坑（丢失绑定）：把方法赋给变量再调用，this 会丢失（变为默认绑定）。

const fn = obj.getX;
fn(); // 非严格下 window；严格下 undefined

• 解决：bind、箭头函数或在调用时通过对象访问。

3️⃣ 显式绑定（call / apply / bind）

• 规则：call / apply / bind 可以显式设置 this。
  • func.call(thisArg, arg1, arg2...)
  • func.apply(thisArg, [args])
  • func.bind(thisArg[, ...args]) 返回绑定后的新函数（不会立即调用）
• 示例：

function greet(g) { return g + ', ' + this.name; }
const person = { name: 'Alice' };

console.log(greet.call(person, 'Hi')); // "Hi, Alice"
const bound = greet.bind(person);
bound('Hello'); // "Hello, Alice"

• 注意：bind 绑定后的函数对于 new 有特殊行为（如果用 new 调用 bound function，new 绑定优先且 thisArg 被忽略；但先 bind 再 new 会创建继承绑定的构造函数 — 复杂，通常避免这样用）。

4️⃣ new 绑定（构造函数）

• 规则：使用 new Func() 时：
  1. 创建一个新对象并将其 [[Prototype]] 指向 Func.prototype
  2. 新对象绑定为 this
  3. 执行构造函数体；如果返回的是对象则返回该对象，否则返回 this
• 示例：

function Person(name) {
  this.name = name;
}
const p = new Person('Bob');
console.log(p.name); // "Bob"

• 与显式绑定的优先级：new 绑定优先于 call/apply/bind（如果用 new f.call(obj) 之类写法，new 会决定最终 this）。

5️⃣ 箭头函数（Arrow functions）——重要例外

• 核心：箭头函数没有自己的 this，它的 this 是 定义时（词法环境） 的 this（闭包式继承）。
• 示例：

const obj = {
  id: 42,
  fn() {
    const arrow = () => console.log(this.id);
    arrow();
  }
};
obj.fn(); // 42

这里 arrow 使用的是 fn 的 this（即 obj），不是调用它的方式决定。

• 常见用法：在回调中保留外层 this（例如 setTimeout、promise、DOM 回调）。
• 坑：不能作为构造函数，也不能给箭头函数 bind 改变 this（bind 不会改变箭头函数的词法 this）。

6️⃣ 严格模式、模块与默认 this

• 在 严格模式（'use strict' 或 ES modules、class 方法默认严格）中：
  • 直接调用普通函数时 this === undefined（不会退化为 global）
• 在浏览器全局脚本（非模块、非严格）中：
  • 直接调用函数 this === window
• 因此：在模块/类中，默认 this 不会自动变成全局对象。

**7️⃣ setTimeout当中的this **

总结 — setTimeout 中 this 的最终规则表

回调类型	this 指向（浏览器）	原因
普通函数 function()	window / undefined	默认绑定
箭头函数 () => {}	外层 this	词法作用域
fn.bind(obj)	obj	显式绑定
obj.method 传进去	丢失绑定 → 默认绑定	call site 和 obj 无关
设置到 DOM 事件里再触发	element	事件系统修改

📍情况 1：普通函数作为回调（最常见）

const obj = {
  x: 1,
  print() {
    setTimeout(function () {
      console.log(this.x);
    }, 0);
  }
};

obj.print();

👉 输出

undefined（或 window.x）

👉 原因

• 定时器回调 不是由 obj 调用
• 回调是由 setTimeout 内部异步调度系统调用的
• 因此 this → 默认绑定
  • 非严格模式：this = window
  • 严格模式 / ES Module：this = undefined

📍情况 2：使用箭头函数作为回调

const obj = {
  x: 1,
  print() {
    setTimeout(() => {
      console.log(this.x);
    }, 0);
  }
};

obj.print();

👉 输出

1

👉 原因

箭头函数没有自己的 this → 使用定义时外层作用域的 this → print() 由 obj 调用 → this = obj → 因此打印 1

⚠️ 如何在 setTimeout 中保持正确的 this？（三种方案）

✔ 方法 1：使用箭头函数（最推荐）

setTimeout(() => {
  console.log(this);
}, 0);

✔ 方法 2：使用 bind

setTimeout(function () {
  console.log(this);
}.bind(this), 0);

✔ 方法 3：保存 this 到变量（老写法）

const self = this;
setTimeout(function () {
  console.log(self);
}, 0);

8️⃣ 事件回调中的 this

button.addEventListener("click", function () {
  console.log(this); // 指向触发事件的元素
});

为什么这里的 this 是 DOM 元素？

→ 因为浏览器主动在事件回调时 使用 element 作为 this 调用回调。

而 setTimeout 不会这样做。

⚠️ 常见陷阱与解决办法（实用贴士）

1. 方法丢失绑定
   • 场景：const fn = obj.method; fn(); → 丢失 this
   • 解决：obj.method.bind(obj)、在构造器中 this.method = this.method.bind(this)、或在调用时 obj.method()。
2. 回调中丢失 this
   • 如 setTimeout(obj.method, 100) → this 丢失
   • 解决：setTimeout(obj.method.bind(obj), 100) 或 setTimeout(() => obj.method(), 100)。
3. DOM 事件处理器
   • 直接函数作为 element.onclick = function () { console.log(this); } → this 是元素
   • 箭头函数则继承外层 this（通常不是元素），所以绑定事件时应慎用箭头函数：
     • 推荐用普通函数以获得 this === element，或明确使用 event.target。
4. React class 组件
   • 类方法默认未绑定，需要在 constructor 中 this.handle = this.handle.bind(this) 或使用 class fields/箭头函数写法：handle = () => {}
5. 丢失上下文导致 bug（经常面试问点）
   • 如果把对象方法作为变量传入第三方库（如事件库、map callback），注意绑定。

✨ 调用优先级总结（从高到低）

1. new 调用（构造函数） — this 指向新对象
2. 显式绑定（call / apply / bind） — this 指向绑定对象（new 优先于显式？new 高于 bind）
3. 隐式绑定（obj.method()） — this 指向对象（最常见）
4. 默认绑定（直接函数调用） — 非严格模式指向全局，严格模式为 undefined

箭头函数：无论上述哪种规则都不会影响箭头函数的 this，它是词法继承的。

8. 模块化

在早期浏览器时代（ES6 之前），所有 JS 代码写在全局作用域：

• 没有作用域隔离 → 全局变量污染
• 依赖顺序混乱 → 必须按 script 标签顺序
• 工程规模变大后难以维护

因此 JS 社区逐步发展出模块化方案。

1️⃣ IIFE（立即执行函数）时代

最原始的“模块化”，通过闭包隔离作用域。

var moduleA = (function () {
  const a = 1;
  function add(x) {
    return x + a;
  }

  return { add };
})();

• ✔ 可以避免全局污染
• ✘ 无依赖管理
• ✘ 无自动加载机制

2️⃣ CommonJS（Node.js 模块化）

写法：

// 导出
module.exports = { add }

// 导入
const { add } = require('./utils')

特点

• 同步加载（require 是同步调用）
• 适合 服务器端（文件在本地）
• 模块是一个对象 {}，require 返回的是值的 拷贝（导出值被缓存）

CommonJS 加载流程

1. 读取文件
2. 包裹成函数（Node 会自动封装）

(function (exports, require, module, __filename, __dirname) {
   // 模块源代码
});

1. 执行函数并缓存 module.exports
2. 下次 require 直接从缓存读

3️⃣ AMD（RequireJS）浏览器时代主流方案

浏览器不能同步加载文件，所以 AMD 提出 异步加载模块：

define(['moduleA'], function (A) {
  A.doSomething();
});

特点：

• 异步加载
• 依赖前置（数组声明）
• 需要引入 require.js

4️⃣ UMD（通用模块定义）

兼容 CommonJS + AMD + 全局变量。

(function (root, factory) {
  if (typeof module === 'object' && module.exports) {
    module.exports = factory(); // Node
  } else if (typeof define === 'function' && define.amd) {
    define(factory); // AMD
  } else {
    root.myLib = factory(); // 浏览器全局
  }
})(this, function () {
  return {};
});

在库中常见，例如 lodash、moment 等早期版本。

8.2 ES Module（ES6 正统模块化）

浏览器和 Node 新规范都支持的标准模块格式。

写法：

导出

export const x = 1;
export function add() {}
export default App;

导入

import { x, add } from './utils.js'
import App from './App.js'

ESM 的核心特点（面试重点🔥）

① 静态分析（最重要）

ESM 在编译阶段就能确定依赖关系，因此：

• 可以做 tree-shaking
• 不能放在 if、循环等动态语句里

import a from './a.js' // 必须写在顶层

② 按需导出：引用绑定（Live Binding）

导出的值不是拷贝，而是引用：

// a.js
export let count = 0;
export function inc() {
  count++;
}

// b.js
import { count, inc } from './a.js';
inc();
console.log(count); // 1 —— 自动更新！

③ 默认异步加载（浏览器端）

浏览器加载 ES module：

<script type="module" src="main.js"></script>

• 会自动并行加载依赖
• 但执行顺序根据依赖拓扑决定（先依赖再执行入口）
• 模块天然使用 strict mode

🧩 CommonJS 与 ESM 的对比（面试高频）

🧩 Node 中 ESM 与 CommonJS 混用的问题

⚠️ 不能 mix：

import x from 'x';
const y = require('y'); // ❌ 报错（ESM 模式中）

Node 需要：

• 使用 "type": "module"
• 或 .mjs 后缀

同时解决互操作要用：

CommonJS → ESM

import pkg from './lib.cjs';

ESM → CommonJS

const pkg = await import('./lib.mjs');

🧩 动态模块加载（import()）

用于懒加载/按需加载（异步）：

import('./chart.js').then(mod => {
  mod.renderChart();
});

React、Vue router 都大量使用它做异步组件。

🧩 可能进一步追问的点

1. 为什么 ESM 能 tree-shaking，CJS 不行？

因为 ESM 是 静态结构，依赖是编译期可确定的。

CJS 的 require 是运行时行为：

require(dynamicPath) // 编译时无法确定

2. 为什么 ESM 会使用 live binding？

为了保证依赖图一致性，避免值快照导致状态不同步。

3. 浏览器加载 ESM 的执行顺序如何？

• 下载并行
• 先执行依赖，再执行入口

🧩 总结

JS 模块化体系从 IIFE → CommonJS → AMD → UMD → ES Module 演进。 ES Module 是现代前端唯一的标准模块系统，支持静态分析、tree-shaking、live binding，并已被浏览器与 Node 全面支持。 工程化构建工具（webpack、Vite）最终也基于 ESM 构建语法来做依赖图与优化。

Promise

Promise 是一种用于 处理异步操作 的对象，能让你更优雅地写出异步代码，避免「回调地狱」。

• 它有三种状态：
  • pending（进行中）
  • fulfilled（已成功）
  • rejected（已失败）

状态一旦从 pending 变为 fulfilled 或 rejected 就不可再改变。

**创建与使用 Promise **

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("操作成功！");
  } else {
    reject("操作失败！");
  }
});

myPromise
  .then(result => {
    console.log(result); // 操作成功！
  })
  .catch(error => {
    console.error(error);
  })
  .finally(() => {
    console.log("无论成功失败都会执行");
  });

要点：

• resolve() 表示成功
• reject() 表示失败
• .then() 处理成功结果
• .catch() 处理失败结果
• .finally() 总会执行
• **Promise 链式调用 **

new Promise((resolve) => {
  resolve(1);
})
.then(num => {
  console.log(num); // 1
  return num + 1;
})
.then(num => {
  console.log(num); // 2
});

• 每个 .then() 返回的值会传给下一个 .then()
• 如果抛出错误，会被最近的 .catch() 捕获
• **Promise 组合使用 **

并行执行多个异步任务：

const p1 = Promise.resolve(1);
const p2 = Promise.resolve(2);

Promise.all([p1, p2])
  .then(values => {
    console.log(values); // [1, 2]
  });

常见方法：

• Promise.all([ ... ])：全部成功才算成功
• Promise.race([ ... ])：第一个完成的决定结果
• Promise.allSettled([ ... ])：等全部结束，不管成功失败
• Promise.any([ ... ])：第一个成功的就返回

五、配合 async / await 使用

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function run() {
  console.log("开始");
  await delay(1000);
  console.log("1秒后执行");
}

run();

• async 声明异步函数
• await 等待 Promise 结果，像同步代码一样写异步逻辑
• 更加直观可读

call apply bind

1. 共同点

• call、apply、bind 都是 函数对象的方法。
• 它们的作用都是： 改变函数调用时的 this 指向，并能传递参数。

👉 换句话说：谁来调用不重要，你可以强行指定 this。

2. call

语法：

func.call(thisArg, arg1, arg2, ...)

• 立即执行函数。
• 参数从第 2 个开始，逐个传入。

例子：

function greet(greeting, punctuation) {
  console.log(greeting + ", " + this.name + punctuation);
}
const person = { name: "Liu" };

greet.call(person, "Hello", "!"); 
// "Hello, Liu!"

3. apply

语法：

func.apply(thisArg, [argsArray])

• 立即执行函数。
• 参数必须打包成数组传入。

例子：

greet.apply(person, ["Hi", "!!"]); 
// "Hi, Liu!!"

👉 区别 call 和 apply：参数传递方式不同。

• call: 单个参数依次传递
• apply: 数组传递

4. bind

语法：

const boundFunc = func.bind(thisArg, arg1, arg2, ...)

• 不会立即执行，而是返回一个新函数。
• 新函数的 this 永远绑定到指定对象。

例子：

const boundGreet = greet.bind(person, "Hey");
boundGreet("?"); 
// "Hey, Liu?"

5. 使用场景对比
   1. 借用方法

   const arr = [1, 2, 3];
   console.log(Math.max.apply(null, arr)); // 3
   

   
   👉 用 apply 把数组当作参数传入。
   1. 函数绑定

   const button = {
     text: "Click me",
     click() {
       console.log(this.text);
     }
   };
   
   setTimeout(button.click.bind(button), 1000); 
   // 确保 this 还是 button
   

   3. 继承构造函数属性

   function Parent(name) {
     this.name = name;
   }
   function Child(name, age) {
     Parent.call(this, name); // 借用 Parent 构造函数
     this.age = age;
   }
   

6. 总结口诀

• call：改 this，参数一个个传，立即执行。
• apply：改 this，参数打包数组，立即执行。
• bind：改 this，返回新函数，之后再执行。

事件中心

class EventEmitter {
  constructor() {
    // 存储事件: { eventName: [callback1, callback2, ...] }
    this.events = {};
  }

  /**
   * 注册订阅者（事件监听）
   * @param {string} event - 事件名称
   * @param {Function} callback - 回调函数
   */
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
    console.log(`✅ 监听事件: ${event}`);
  }

  /**
   * 注册一次性订阅者（触发一次后销毁）
   * @param {string} event - 事件名称
   * @param {Function} callback - 回调函数
   */
  once(event, callback) {
    const onceWrapper = (...args) => {
      callback(...args);          // 执行原回调
      this.off(event, onceWrapper); // 取消订阅
    };
    this.on(event, onceWrapper);
  }

  /**
   * 取消订阅
   * @param {string} event - 事件名称
   * @param {Function} callback - 要移除的回调
   */
  off(event, callback) {
    if (!this.events[event]) return;

    this.events[event] = this.events[event].filter(cb => cb !== callback);
    console.log(`❌ 取消事件监听: ${event}`);
  }

  /**
   * 触发事件（发布）
   * @param {string} event - 事件名称
   * @param  {...any} args - 传递给回调的参数
   */
  emit(event, ...args) {
    if (this.events[event]) {
      console.log(`📢 触发事件: ${event}, 参数:`, args);
      this.events[event].forEach(callback => callback(...args));
    }
  }
}

// ================== 使用示例 ==================

const bus = new EventEmitter();

function greet(name) {
  console.log("👋 你好,", name);
}

function onlyOnce(msg) {
  console.log("⚡ 只执行一次:", msg);
}

// 订阅事件
bus.on("sayHello", greet);

// 订阅一次性事件
bus.once("init", onlyOnce);

// 触发事件
bus.emit("sayHello", "Alice");
bus.emit("sayHello", "Bob");

// 一次性事件
bus.emit("init", "第一次调用");
bus.emit("init", "第二次调用（不会触发）");

// 取消订阅
bus.off("sayHello", greet);

// 再次触发（不会执行）
bus.emit("sayHello", "Charlie");

class AdvancedEventCenter {
    constructor() {
        // 保存事件名 -> 回调数组
        // 每个元素: { callback, once, priority }
        this.events = {};
    }

    // 普通订阅
    subscribe(eventName, callback, { priority = 0 } = {}) {
        if (!this.events[eventName]) this.events[eventName] = [];
        this.events[eventName].push({ callback, once: false, priority });

        // 按优先级排序，数字越大越先执行
        this.events[eventName].sort((a, b) => b.priority - a.priority);

        // 返回取消订阅函数
        return () => this.unsubscribe(eventName, callback);
    }

    // 一次性订阅
    once(eventName, callback, { priority = 0 } = {}) {
        if (!this.events[eventName]) this.events[eventName] = [];
        this.events[eventName].push({ callback, once: true, priority });
        this.events[eventName].sort((a, b) => b.priority - a.priority);
    }

    // 取消订阅
    unsubscribe(eventName, callback) {
        if (!this.events[eventName]) return;
        this.events[eventName] = this.events[eventName].filter(item => item.callback !== callback);
    }

    // 发布事件（支持异步回调）
    async publish(eventName, data) {
        if (!this.events[eventName]) return;

        const callbacks = [...this.events[eventName]]; // 拷贝，避免回调中修改数组

        for (const item of callbacks) {
            try {
                await item.callback(data); // 支持 async/await
            } catch (err) {
                console.error(`Event "${eventName}" callback error:`, err);
            }

            if (item.once) {
                this.unsubscribe(eventName, item.callback);
            }
        }
    }
}

防抖节流

🔹 1. 防抖（Debounce）

定义

• 在 事件触发后，延迟一段时间再执行回调
• 如果在这段时间内事件再次触发，则重新计时
• 典型场景：输入搜索、自动保存

简单理解：事件触发频繁，但只在最后一次触发后执行回调

示意图

事件触发:  |---|---|---|---->
防抖延迟:  -----------[执行一次]

• 多次事件触发，只执行最后一次

JS 实现示例

/**
 * 防抖函数
 * @param {Function} fn - 需要防抖的回调函数
 * @param {number} delay - 延迟时间（毫秒）
 * @returns {Function} 返回一个新的函数，事件触发时调用
 *
 * 思路：
 * 1. 每次事件触发时，清除之前的定时器
 * 2. 重新设置定时器，延迟执行回调
 * 3. 只有最后一次触发事件后，回调才会执行
 */
function debounce(fn, delay = 300) {
    let timer; // 保存定时器 ID

    return function(...args) {
        const context = this; // 保存调用时的 this

        // 如果上一次定时器存在，清除它
        if (timer) clearTimeout(timer);

        // 重新设置定时器
        timer = setTimeout(() => {
            fn.apply(context, args); // 延迟执行回调
        }, delay);
    };
}

// 使用示例
const debouncedFn = debounce(() => {
    console.log('防抖触发', new Date().toLocaleTimeString());
}, 1000);

// document.querySelector('#input').addEventListener('input', debouncedFn);

🔹 2. 节流（Throttle）

定义

• 保证 固定时间间隔只执行一次回调
• 即使事件不断触发，也会按照时间间隔执行
• 典型场景：滚动加载、鼠标拖动、按钮防多次点击

简单理解：事件触发频繁，但回调按照固定频率执行

示意图

事件触发:  |---|---|---|---->
节流执行:  [执行]-X-X-[执行]-X-[执行]

• 每隔固定时间执行一次，不管事件触发多少

JS 实现示例

/**
 * 节流函数
 * @param {Function} fn - 需要节流的回调函数
 * @param {number} interval - 时间间隔（毫秒）
 * @returns {Function} 返回一个新的函数，事件触发时调用
 *
 * 思路：
 * 1. 记录上一次回调执行的时间
 * 2. 每次事件触发时，判断距离上一次执行是否超过间隔
 * 3. 超过间隔就执行回调，并更新上一次执行时间
 */
function throttle(fn, interval = 300) {
    let lastTime = 0; // 保存上一次执行时间

    return function(...args) {
        const context = this;
        const now = Date.now();

        if (now - lastTime >= interval) {
            fn.apply(context, args); // 执行回调
            lastTime = now; // 更新上一次执行时间
        }
    };
}

// 使用示例
const throttledFn = throttle(() => {
    console.log('节流触发', new Date().toLocaleTimeString());
}, 2000);

// window.addEventListener('scroll', throttledFn);

🔹 3. 防抖 vs 节流

继承

经典手撕

1. 订阅发布

class Bus{
    constrcutor(){
        this.events=[];
    }

    //订阅
    on(event,callback){
        if(!this.events[event])this.events[event]=[];
        this.events[event].push(callback);
    }

    //取消订阅
    off(event,callback){
        if(!this.events[event])return;
        this.events[event].fliter(cb => cb!== callback);
    }

    //发布
    publish(event,...args){
        if(!this.events[event])return;
        this.events[event].forEach( callback =>
                                   callback(...args);
                                   })
    }

    //一次性订阅
    once(event,callback){
        const onceWrap=(...args)=>{
            callback(...args);
            this.off(event, onceWrap); 
        }
        this.on(event,onceWrap)
        
    }

}

2. 手写promise

//promise.all
Promise.myAll=function(promises){
  return new Promise((resolve,reject)=>{
    if(!Array.isArray(promises))return reject("传入参数错误")
    if(!promises.length)return resolve([])
    
    let results=[]
    let count=0;
    
    promises.forEach((p,index)=>{
      Promise.resolve(p).then(value=>{//Promise.resolve(p)其中p为Promise对象。则此处的value，将是p成功之后的返回值
        results[index]=value;
        count++;
        
        if(count===promises.length)resolve(results)
      }).catch(err=>reject(err))
    })
  })
}

//promise.race
Promise.myRace = function (promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError("Argument must be an array"));
    }

    promises.forEach(p => {
      Promise.resolve(p).then(resolve).catch(reject);
    });
  });
};

//promise.allsettled
Promise.myAllSettled = function (promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError("Argument must be an array"));
    }

    const results = [];
    let count = 0;

    if (promises.length === 0) return resolve([]);

    promises.forEach((p, index) => {
      Promise.resolve(p)
        .then(value => {
          results[index] = { status: "fulfilled", value };
        })
        .catch(reason => {
          results[index] = { status: "rejected", reason };
        })
        .finally(() => {
          count++;
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
};

//promise.any
Promise.myAny = function (promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      return reject(new TypeError("Argument must be an array"));
    }

    let errors = [];
    let count = 0;

    if (promises.length === 0) {
      return reject(new AggregateError([], "All promises were rejected"));
    }

    promises.forEach((p, index) => {
      Promise.resolve(p)
        .then(resolve)
        .catch(err => {
          errors[index] = err;
          count++;

          if (count === promises.length) {
            reject(new AggregateError(errors, "All promises were rejected"));
          }
        });
    });
  });
};

3. bind/call/apply

Function.prototype.myBind = function (context, ...args) {
  const fn = this;

  function boundFn(...newArgs) {
    // 如果作为构造函数调用 (new)
    if (this instanceof boundFn) {
      return fn.apply(this, [...args, ...newArgs]);
    }
    // 普通调用
    return fn.apply(context, [...args, ...newArgs]);
  }

  // 保持原型链
  boundFn.prototype = Object.create(fn.prototype);

  return boundFn;
};


Function.prototype.myCall = function (context, ...args) {
  context = context || globalThis; // 处理 null/undefined

  // 创建唯一属性避免覆盖
  const fnKey = Symbol();

  context[fnKey] = this;  // this 就是要执行的函数

  const result = context[fnKey](...args); // 执行函数

  delete context[fnKey]; // 清理

  return result; // 返回函数执行结果
};




Function.prototype.myApply = function (context, args) {
  context = context || window;

  const fnKey = Symbol();
  context[fnKey] = this;

  let result;

  if (Array.isArray(args)) {
    result = context[fnKey](...args);
  } else {
    result = context[fnKey]();  
  }

  delete context[fnKey];

  return result;
};