第八章：代码组织与高级特性

在本章中，我们将拾遗补缺，探索 JavaScript 语言的更多边界：

1. 首先，我们将系统学习 ES6 模块系统，这是现代前端工程化的基石。
2. 接着，我们将深入 迭代器与生成器，揭示 for...of 循环背后的工作原理。
3. 然后，我们将探讨 Symbol 的真正价值，以及如何利用它来扩展对象的底层行为。
4. 紧接着，我们将建立健壮性编程的思维，学习 JavaScript 的错误处理机制。
5. 最后，我们将接触 Intl 国际化 API 与严格模式，为编写更专业、更安全的代码添砖加瓦。

8.1. ES6 模块系统：import 与 export

8.1.1. 模块化的历史与必要性

历史痛点: 在 ES6 出现之前，JavaScript 语言本身没有模块化标准。开发者为了避免全局变量污染和组织代码，发明了多种模式：

• IIFE (立即执行函数表达式) 模式: 通过函数作用域模拟私有变量，是早期的模块化雏形。
• CommonJS (CJS): 主要用于服务器端（Node.js），使用 require() 同步加载模块。
• AMD (Asynchronous Module Definition): 主要用于浏览器端，使用 define() 异步加载模块。

这些方案解决了有无问题，但标准不统一。因此，ES6 在语言层面引入了官方的模块化解决方案——ES Modules (ESM)。

8.1.2. 核心语法详解

ESM 主要由 export 和 import 两个关键字组成。一个文件就是一个模块。

export：从模块中导出功能

有两种导出方式：命名导出和默认导出。

• 命名导出: 一个模块可以有多个命名导出。
  文件路径: utils/math.js

  1 2 3 4 5

  export const PI = 3.14159; export function sum(a, b) { return a + b; }

• 默认导出: 一个模块只能有一个默认导出。它用于导出一个模块最核心的功能。
  文件路径: components/Button.js

  1 2 3 4

  export default function Button() { // ... a component's implementation console.log('This is a default Button.'); }

import：从其他模块导入功能

• 导入命名导出: 必须使用花括号 {}，且名称必须与导出的名称完全一致（可以使用 as 重命名）。

  1 2 3 4

  // 导入 math.js import { PI, sum as add } from './utils/math.js'; console.log(add(PI, 2));

• 导入默认导出: 无需使用花括号，可以为导入的成员指定任意名称。

  1 2 3 4

  // 导入 Button.js import MyCustomButton from './components/Button.js'; MyCustomButton();

8.1.3. 模块的加载机制

• 静态解析: ESM 的 import 和 export 必须在模块的顶层使用，不能在 if 语句或函数调用中。这是因为 JavaScript 引擎在代码执行前需要对模块依赖关系进行静态分析，以构建依赖图和进行优化。

• 动态 import(): 为了弥补静态导入无法按需加载的不足，ES2020 引入了动态 import()。它是一个函数，返回一个 Promise，可以在运行时根据条件异步加载模块。
  业务场景: 当用户点击某个按钮时，才加载一个体积较大的图表库。

  1 2 3 4 5 6 7 8 9 10 11 12

  const chartBtn = document.getElementById('chartBtn'); chartBtn.addEventListener('click', async () => { try { // 动态导入 const ChartingLibrary = await import('./libs/charts.js'); // 模块加载完毕后，使用其导出的功能 ChartingLibrary.drawChart(); } catch (error) { console.error('Failed to load chart library', error); } });

8.2. 迭代器（Iterators）与生成器（Generators）

8.2.1. 迭代协议再探

承上启下: 在第四章我们提到，for...of 可以遍历数组、字符串等，其背后的原理是迭代协议。现在我们来深入其内部。

• Iterable Protocol (可迭代协议): 要求一个对象必须实现一个 [Symbol.iterator] 方法。
• Iterator Protocol (迭代器协议): 要求 [Symbol.iterator] 方法返回一个“迭代器”对象。这个迭代器对象必须有一个 next() 方法，每次调用 next() 都会返回一个 { value, done } 对象。

8.2.2. 生成器函数 (function*)

手动实现迭代器协议非常繁琐。为此，ES6 提供了生成器函数，它是创建迭代器的语法糖。

• 语法: 通过在 function 关键字后加上星号 * 来定义。
• yield 关键字: 这是生成器的核心。它会暂停函数的执行并“产出”一个值。当迭代器的 next() 方法被再次调用时，函数会从暂停处继续执行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 定义一个生成器函数
function* numberGenerator() {
  console.log('Generator started');
  yield 1; // 产出 1，暂停
  console.log('Resumed after 1');
  yield 2; // 产出 2，暂停
  console.log('Resumed after 2');
  yield 3; // 产出 3，暂停
  console.log('Generator finished');
}

// 调用生成器函数，返回一个迭代器
const iterator = numberGenerator();

// 使用 for...of 自动遍历
for (const value of iterator) {
  console.log(`Received value: ${value}`);
}

1
2
3
4
5
6
7
Generator started
Received value: 1
Resumed after 1
Received value: 2
Resumed after 2
Received value: 3
Generator finished

8.2.3. 高级应用

生成器是极其强大的工具，它的“暂停执行”能力是许多高级模式的基础，例如：

• 实现惰性求值: 可以创建一个无限序列的生成器，而不会耗尽内存，因为值是按需生成的。
• 简化异步流程: 在 async/await 出现之前，著名的 co.js 库就利用生成器和 yield 来模拟同步方式编写异步代码，是 async/await 的重要前身。

8.3. Symbol：创建独一无二的属性键

8.3.1. Symbol 的核心价值

Symbol 是 ES6 引入的一种新的原始数据类型。Symbol() 函数会返回一个全局唯一且不可变的值。

核心痛点: 当你希望为一个第三方对象添加一个属性，但又担心这个属性名会与对象已有的或未来可能添加的属性名发生冲突时，Symbol 是完美的解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const mySecretKey = Symbol('description'); // 'description' 仅用于调试

const user = {
  name: 'Alice'
};

// 使用 Symbol 作为键，这个属性不会与任何字符串键冲突
user[mySecretKey] = 'This is my secret data';

console.log(user.name);         // 'Alice'
console.log(user[mySecretKey]); // 'This is my secret data'

// Symbol 属性默认是不可枚举的
console.log(Object.keys(user)); // ['name']
for (const key in user) {
  console.log(key); // 只打印 'name'
}

8.3.2. Well-Known Symbols

JavaScript 内置了一系列“著名”的 Symbol 值，它们作为对象的特殊属性键，可以让我们“钩入”并自定义语言的内部行为。

• Symbol.iterator: 我们已经见过，拥有此属性的对象即为“可迭代的”。
• Symbol.toStringTag: 修改 Object.prototype.toString.call(obj) 的返回值。

1
2
3
4
5
6
7

class MyCustomObject {
  get [Symbol.toStringTag]() {
    return 'Custom';
  }
}
const myObj = new MyCustomObject();
console.log(Object.prototype.toString.call(myObj)); // "[object Custom]"

8.4. 健壮性编程：错误处理机制

8.4.1. try...catch...finally

• try 块: 包裹可能抛出错误的代码。
• catch (error) 块: 当 try 块中发生错误时，执行此块的代码。error 对象包含了错误的详细信息。
• finally 块: 无论 try 块是否出错，此块的代码总会执行。常用于释放资源、关闭连接等清理工作。

8.4.2. 错误对象 (Error)

JavaScript 有多种内置的错误类型，它们都继承自 Error 对象：

• ReferenceError: 访问不存在的变量。
• TypeError: 值的类型不符合预期。
• SyntaxError: 代码不符合语法规范。

最佳实践: 在应用中，我们应该创建并抛出自定义的错误类，以提供更明确的错误信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 创建自定义错误类型
class NetworkError extends Error {
  constructor(message, status) {
    super(message);
    this.name = 'NetworkError';
    this.status = status;
  }
}

function fetchData() {
  const success = false; // 模拟网络失败
  if (!success) {
    throw new NetworkError('Failed to fetch data from API', 500);
  }
}

try {
  fetchData();
} catch (error) {
  if (error instanceof NetworkError) {
    console.error(`[${error.name}] Status ${error.status}: ${error.message}`);
  } else {
    console.error('An unknown error occurred:', error);
  }
}

8.5. 国际化 API (Intl)

核心痛点: 手动处理不同国家和地区的日期、数字、货币格式是一场噩梦。Intl 对象提供了标准化的解决方案。

• Intl.DateTimeFormat: 格式化日期和时间。

  1 2 3

  const date = new Date(); console.log(new Intl.DateTimeFormat('en-US').format(date)); // e.g., "8/28/2025" console.log(new Intl.DateTimeFormat('zh-CN', { dateStyle: 'full' }).format(date)); // e.g., "2025年8月28日星期四"

• Intl.NumberFormat: 格式化数字和货币。

  1 2 3

  const number = 123456.789; console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)); // "123.456,79 €" console.log(new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' }).format(number)); // "¥123,456.79"

8.6. 严格模式 ('use strict')

核心价值: 严格模式是开发者主动选择的一种更规范、更安全的 JavaScript 执行模式。它能修复语言的一些“怪癖”，并将一些静默的错误转变为显式的异常抛出，但这个模式远不如我们之后要学习的TypeScript，了解即可

启用方式: 在脚本或函数的开头添加字符串字面量 'use strict';。

1
2
3
4
5
6
7
8
9
10
11
12

'use strict';

// 严格模式下的主要变化
// 1. 禁止使用未声明的变量
// undeclaredVar = 1; // Uncaught ReferenceError

// 2. 函数中的 this 在全局调用时为 undefined，而非 window
function showThis() { console.log(this); }
showThis(); // undefined

// 3. 禁止删除不可删除的属性
// delete Object.prototype; // Uncaught TypeError

最佳实践: 现代前端项目（尤其是使用模块化的项目）默认都在严格模式下运行，我们应该始终采用这种模式来编写代码。