第一章： JavaScript 核心语法：构建坚实基础

在本章中，我们将聚焦于 JavaScript 的独特之处：

1. 首先，我们将快速了解 JavaScript 的构成与标准，明确学习的重点。
2. 接着，我们将深入 var 的历史遗留问题——变量提升，并理解为何 let 和 const 是现代 JS 的必然选择。
3. 然后，我们将辨析 JS 特有的 数据类型，并剖析最关键的“陷阱”——隐式类型转换。
4. 最后，我们将跳过基础语法，仅探讨 JS 中 运算符与流程控制的特殊行为，例如 == 与 === 的本质区别，以及 for...in 与 for...of 的正确用法。

1.1. 初识 JavaScript：语言构成与现代标准

技术背景: JavaScript（简称 JS）诞生于 1995 年，它与 Java 并无直接的血缘关系，是网景公司为了让浏览器处理动态交互而设计的脚本语言。发展至今，它已成为构建现代 Web 应用不可或缺的核心技术。

一份完整的 JavaScript 实现由三个不同部分组成：

• 核心 (ECMAScript): 由 ECMA-262 规范定义，提供核心语言功能。我们通常所说的 ES5, ES6 (ECMAScript 2015), ES2025 等版本，就是指这个核心语法的标准。在 2025 年，ES6+ 已是行业开发标准。
• 文档对象模型 (DOM): 提供与网页内容（HTML 文档）交互的接口。
• 浏览器对象模型 (BOM): 提供与浏览器窗口交互的接口。

解决方案: 在现代 Web 开发中，我们推荐将 JavaScript 代码分离到独立的 .js 文件中，并通过 <script> 标签引入，这是维护代码整洁和可复用性的最佳实践。

1

console.log('Hello from an external file!');

1

<script src="scripts/main.js"></script>

1
2
3

<script>
  console.log('Hello from inside the HTML!');
</script>

1.2. 变量与常量：let、const 的时代与 var 的历史包袱

在上一节，我们了解了 JS 的基本构成。现在，我们来看编程的第一步：变量。您可能熟悉其他语言的变量声明，但在 JS 中，这是一个有“历史”的话题，也是理解其底层行为的关键。

痛点背景: 在 ES6 (2015) 之前，JavaScript 只有 var 一种声明变量的方式。var 存在一个与其他主流语言（如 Java, Python）截然不同的特性——变量提升 (Hoisting)。这会导致代码行为违反直觉，是许多早期 JS bug 的根源。

看下面的代码，在 Java 或 Python 中，这会直接抛出“变量未定义”的错误。但在 JavaScript 中…

1
2
3
4
5
6
7

function hoistingTest() {
  console.log(myVar); // 在声明前使用变量
  var myVar = "Hello, Prorise!";
  console.log(myVar);
}

hoistingTest();

1
2
undefined
Hello, Prorise!

解决方案: 为了解决 变量提升 以及 var 带来的其他作用域问题，ES6 引入了 let 和 const。它们使用 块级作用域 (Block Scope)，行为更符合预期，并且 let 声明的变量在声明前访问会直接报错，这被称为 暂时性死区 (Temporal Dead Zone, TDZ)，从根本上杜绝了变量提升带来的问题。

1
2
3
4
5
6
7
8
9
10
11

function blockScopeTest() {
  try {
    console.log(myLet); // 在声明前访问，进入暂时性死区
  } catch (e) {
    console.error(e.message);
  }
  let myLet = "Hello, Modern JS!"; // 变量在这里才“出生”
  console.log(myLet);
}

blockScopeTest();

1
2
Cannot access 'myLet' before initialization
Hello, Modern JS!

2025 年最佳实践:

• 停止使用 var。
• 默认使用 const 声明变量，这能确保变量不被重新赋值，增强代码的稳定性和可预测性。
• 只在确定变量需要被重新赋值时，才使用 let。

1.3. 数据类型：掌握程序的基石

JavaScript 的数据类型分为两大类：原始类型和引用类型。这个划分对其内存分配和变量赋值行为有着深远影响，本小节我们仅作为了解，在后续的章节我们会对于每一个数据类型进行深入剖析

1
2

const str = 'Hello';
console.log(typeof str); // string

1
2

const n = 42;
console.log(typeof n); // number

1
2

const b = true;
console.log(typeof b); // boolean

1
2

const val = null;
console.log(val); // null

1
2

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

1
2

const sym = Symbol('id');
console.log(typeof sym); // symbol

1
2

const big = 9007199254740993n;
console.log(typeof big); // bigint

1
2

const obj = { name: 'Prorise' };
console.log(typeof obj); // object

1
2

const arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true

1
2

const fn = () => console.log('hi');
console.log(typeof fn); // function

1
2

const date = new Date();
console.log(date instanceof Date); // true

1.4. 深度解析：类型转换与隐式强制的“陷阱”

这是 JavaScript 与 Java、Python 等语言最大的区别之一，也是面试中的高频考点。JavaScript 是一门 弱类型 语言，在运算时会自动进行类型转换，这个过程被称为 隐式强制类型转换 。虽然这提供了灵活性，但也埋下了很多“陷阱”。

痛点背景: 观察以下代码，其结果在强类型语言中是不可想象的，但在 JS 中却真实发生。

1
2
3
4
5

console.log(`'5' - 1 = ${'5' - 1}`);
console.log(`'5' + 1 = ${'5' + 1}`);
console.log(`true + 1 = ${true + 1}`);
console.log(`' ' == 0 is ${' ' == 0}`);
console.log(`null == undefined is ${null == undefined}`);

1
2
3
4
5
'5' - 1 = 4
'5' + 1 = 51
true + 1 = 2
' ' == 0 is true
null == undefined is true

一、== vs ===：核心区别

• === 严格相等：不做任何类型转换，只要类型或值不同就返回 false。
• == 宽松相等：先按隐式规则把两边转成同一类型，再比较值。规则复杂、结果难预测，99 % 的场景请用 ===。

1
2

'1' === 1   // false  （类型不同）
'1' == 1    // true   （字符串 '1' 被转成数字 1）

二、算术 / 拼接运算符的隐式转换

• 加法 +：只要有一个操作数是字符串，就执行 字符串拼接。
• 其余 -、*、/、%：两边都尽量 转成数字 再运算。

1
2
3

'10' + 5   // "105"
'10' - 5   // 5
'6' * '2'  // 12

三、实战建议

1. 比较时始终 优先使用 ===。
2. 运算或比较前 主动显式转换，避免依赖隐式规则。
3. 判断“空”时，用 value == null 可一次性覆盖 null 与 undefined，这是少数 == 比 === 更简洁且不易出错的场景。

1.5. 运算符与流程控制中的 JS 特性

您已经熟悉了大多数运算符和流程控制结构。这里我们仅聚焦于 JavaScript 中行为独特且常用的部分。在 Java 或 Python 中，逻辑运算符 && 和 || 通常返回布尔值。但在 JavaScript 中，它们返回的是决定了整个表达式结果的那个 操作数的值，这种特性被称为 短路求值

• expr1 && expr2: 如果 expr1 能被转换为 false 值，则返回 expr1 的值，否则返回 expr2 的值。
• expr1 || expr2: 如果 expr1 能被转换为 true 值，则返回 expr1 的值，否则返回 expr2 的值。

实战场景: 这种行为常被用于设置函数参数的默认值或执行条件代码。

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

// 场景 1: 设置默认值
function greet(name) {
  const finalName = name || "Guest";
  console.log(`Hello, ${finalName}!`);
}

greet("Prorise");
greet(); // name is undefined (false), 所以会打印 Guest

// 场景 2: 条件函数执行
let userIsAdmin = true;
// 如果 userIsAdmin 为 true，则执行后面的函数
userIsAdmin && console.log("Admin panel functions loaded.");

1
2
3
Hello, Prorise!
Hello, Guest!
Admin panel functions loaded.

JavaScript 提供了两种独特的 for 循环变体来遍历数据结构，它们的用途完全不同。

• for...in: 遍历对象的可枚举属性名 (key)。它主要用于遍历普通对象。不推荐用它来遍历数组，因为它会遍历到数组原型链上的属性，且顺序无法保证。
• for...of (ES6 新增): 遍历可迭代 (Iterable) 对象的值 (value)。这是遍历数组、字符串、Map、Set 等数据结构的 推荐方式。

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

const user = {
  name: "Prorise",
  role: "Admin"
};

const permissions = ["read", "write", "execute"];

// 使用 for...in 遍历对象属性
console.log("--- for...in (Object) ---");
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

// 使用 for...of 遍历数组元素
console.log("\n--- for...of (Array) ---");
for (const permission of permissions) {
  console.log(permission);
}

1
2
3
4
5
6
7
8
--- for...in (Object) ---
name: Prorise
role: Admin

--- for...of (Array) ---
read
write
execute

1.6. 本章核心速查与高频面试题

核心速查总结

第二章： 函数与作用域：代码组织与执行上下文

在本章中，我们将层层递进，揭开函数与作用域的神秘面纱：

1. 首先，我们将从 函数基础 出发，辨析两种核心的函数定义方式及其差异。
2. 接着，我们将深入 作用域与闭包，理解 JavaScript 是如何管理变量以及函数为何能“记住”其创建时的环境。
3. 然后，我们将攻克 JS 中最重要也最易混淆的概念之一 —— this 关键字，掌握其指向的四大核心规则。
4. 紧接着，我们将学习 call, apply, bind 这三个强大的工具，学会如何随心所欲地改变 this 的指向。
5. 最后，我们将探讨几种 特殊的函数形式，尤其是改变了 this 规则的箭头函数。

2.1. 函数基础：代码复用的核心

您已经了解函数的基本概念，但 JavaScript 中定义函数的方式存在一个不易察觉的但至关重要的区别：函数声明与函数表达式。

1
2
3
4
5

console.log(add(5, 10)); // 15

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

1
2
3
4
5
6
7
8
9
10
11

try {
  console.log(subtract(10, 5)); // 报错！
} catch (e) {
  console.error(e.message); // Cannot access 'subtract' before initialization
}

const subtract = function (a, b) {
  return a - b;
};

console.log(subtract(10, 5)); // 5

函数的参数

JavaScript 在函数参数处理上非常灵活，ES6 更是引入了便捷的默认值和 Rest 参数。

• 参数默认值: 为参数提供默认值，当调用函数时未传递该参数或传递了 undefined 时，该默认值会被使用。

  1 2 3 4 5

  function greet(name = "Guest", message = "Welcome") { console.log(`${message}, ${name}!`); } greet("Prorise"); // Welcome, Prorise! greet(); // Welcome, Guest!

• Rest 参数 (Rest Parameters): 使用 ... 语法，可以将一个不定数量的参数表示为一个数组。这在需要处理可变数量参数的场景中非常有用。

  1 2 3 4 5 6

  function sum(...numbers) { // 'numbers' 是一个包含了所有传入参数的真实数组 return numbers.reduce((total, current) => total + current, 0); } console.log(sum(1, 2, 3)); // 6 console.log(sum(10, 20, 30, 40)); // 100

  Rest 参数必须是函数参数列表的最后一个参数。

2.2. 作用域与闭包：理解变量的生命周期与“记忆”

承上启下: 我们已经知道如何创建函数，但函数内部的变量是如何被访问和管理的？这就引出了 JavaScript 中两个最核心的概念：作用域和闭包。

作用域 (Scope)

1. 全局作用域 (Global Scope): 在所有函数和代码块之外定义的变量，拥有全局作用域，在代码的任何地方都可以访问。
2. 函数作用域 (Function Scope): 在函数内部定义的变量，只能在该函数内部访问。
3. 块级作用域 (Block Scope): (ES6 新增) 在 {} 代码块（如 if, for, while 语句）内由 let 和 const 声明的变量，只在该代码块内部有效。

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

// 1. 全局作用域 (Global Scope)
const globalVar = "我在全局作用域";

console.log(globalVar); // -> "我在全局作用域"

function scopeTest() {
  // 2. 函数作用域 (Function Scope)
  var functionVar = "我仅在函数作用域内可见";

  console.log(globalVar);   // -> 可以访问全局变量
  console.log(functionVar); // -> "我仅在函数作用域内可见"

  if (true) {
    // 3. 块级作用域 (Block Scope)
    let blockVar = "我仅在这个 if 块内可见";
    console.log(blockVar); // -> "我仅在这个 if 块内可见"
  }
}

闭包 (Closure)

痛点背景: 按照作用域规则，一个函数执行完毕后，其内部的局部变量应该被销毁和回收。但如果我们希望一个函数能“记住”它创建时所在的环境，即使它在其他地方被执行，应该怎么办？

1
2
3
4
5
6
7

function createGreeter() {
  const name = "Prorise";
  // 此处应该返回一个打招呼的动作，但如果直接返回字符串，name 变量就丢失了
  return `Hello, ${name}`; // 这样无法实现“稍后”打招呼
}
const greeting = createGreeter();
console.log(greeting); // 只能立即得到结果

1
Hello, Prorise

解决方案: 闭包 就是解决这个问题的答案。闭包能使函数执行完后，其内部局部变量因被引用而不被销毁，从而记住创建时的环境。比如在一个函数内部返回另一个函数，内部函数就形成了闭包，可访问外部函数的局部变量。在 JavaScript 中，当一个函数返回另一个函数时，就创建了一个闭包。

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

function createGreeter() {
    const name = "Prorise";
    // 返回一个函数，这个函数“记住”了它被创建时的环境，包括变量 name
    return function () {
        console.log(`Hello, ${name}`);
    };
}

// greeter 变量现在持有了内部返回的那个函数
const greeter = createGreeter();

// 即使 createGreeter 已经执行完毕，greeter 函数依然可以访问到 name 变量
greeter();
greeter();

1
2
Hello, Prorise
Hello, Prorise

闭包的核心价值:

1. 数据封装与私有变量: 闭包可以创建出只能通过特定函数访问的“私有”变量，是实现模块化和封装的基础。
2. 状态保持: 让函数能够跨多次调用保持状态，例如计数器、缓存等。

2.3. this 关键字：解密上下文的指向

this 是 JavaScript 中最令人困惑的概念之一，但也是最重要的。与许多其他语言不同，JavaScript 中 this 的值并不取决于它在哪里被定义，而是取决于它在何处、以及如何被调用。this 指向的是函数的 执行上下文。

掌握 this 的关键在于理解以下四种绑定规则：

1. 默认绑定

当函数作为独立函数直接调用时（没有通过对象调用），this 会被绑定到全局对象。在浏览器中是 window，在严格模式 ('use strict') 下是 undefined。

1
2
3
4
5

function showThis() {
  console.log(this);
}

showThis(); // 在非严格模式下，输出 window 对象

2. 隐式绑定

当函数作为对象的一个方法被调用时，this 会被绑定到调用该方法的那个对象。

1
2
3
4
5
6
7
8
9

const user = {
  name: "Prorise",
  greet: function() {
    // this 指向调用 greet 方法的 user 对象
    console.log(`Hello, my name is ${this.name}`);
  }
};

user.greet(); // greet 是通过 user 对象调用的

1
Hello, my name is Prorise

陷阱: 如果将方法赋给另一个变量再调用，隐式绑定会丢失，退化为默认绑定。

1
2
3
4
5
6
7
8

const user = {
    name: "Prorise",
    greet: function () {
        console.log(this.name);
    }
};
const standaloneGreet = user.greet;
standaloneGreet(); // 输出 undefined (非严格模式下 this.name 是 window.name)

3. new 绑定

当函数通过 new 关键字调用（作为构造函数）时，this 会被绑定到一个新创建的空对象上。

1
2
3
4
5
6
7
8

function User(name) {
    // this 被绑定到一个新对象 {}
    this.name = name;
    // 构造函数隐式返回 this
}

const userInstance = new User("Prorise");
console.log(userInstance.name);

1
Prorise

4. 显式绑定

我们可以通过 call(), apply(), 或 bind() 方法，强制指定函数执行时的 this 值。我们将在下一节详细探讨。

2.4. 核心原理：call、apply 与 bind 的应用

上一节我们提到，隐式绑定可能会丢失，导致 this 指向非预期的对象。为了解决这个问题，JavaScript 提供了三种方法来显式地、强制地设置函数的 this 上下文。

1
2
3
4
5
6
7

const person = { name: "Prorise" };

function introduce(city, country) {
  console.log(`I am ${this.name}, from ${city}, ${country}.`);
}

introduce.call(person, "Guangzhou", "China"); // I am Prorise, from Guangzhou, China.

1
2
3
4
5
6
7
8

const person = { name: "Prorise" };
const location = ["Shenzhen", "China"];

function introduce(city, country) {
  console.log(`I am ${this.name}, from ${city}, ${country}.`);
}

introduce.apply(person, location); // I am Prorise, from Shenzhen, China.

1
2
3
4
5
6
7
8
9
10

const person = { name: "Prorise" };

function introduce(city, country) {
  console.log(`I am ${this.name}, from ${city}, ${country}.`);
}

const boundIntroduce = introduce.bind(person, "Beijing");

// 稍后调用
boundIntroduce("China"); // I am Prorise, from Beijing, China.

2.5. 特殊函数：IIFE, 箭头函数

除了常规函数，JavaScript 还有一些特殊的函数形式，它们在特定场景下非常有用。

IIFE (立即执行函数表达式)

痛点背景: 在 ES6 出现块级作用域之前，为了避免在 for 循环等场景中创建的变量污染全局作用域，开发者们发明了 IIFE 来创建一个临时的函数作用域。

1
2
3
4

(function() {
  var message = "函数内部作用域";
  console.log(message);
})();

1
函数内部作用域

箭头函数

ES6 引入的箭头函数提供了一种更简洁的函数写法，但它最重要的特性是 它没有自己的 this 绑定。

核心特性: 箭头函数会捕获其定义时所在上下文（作用域）的 this 值，并将其作为自己的 this。这彻底解决了传统函数在回调中 this 指向丢失的问题。

痛点背景: 看一个传统的回调 this 丢失问题。

1
2
3
4
5
6
7
8
9
10
11

const team = {
  name: "Prorise Devs",
  members: ["Alice", "Bob"],
  showMembers: function() {
    this.members.forEach(function(member) {
      // 这里的 this 不再指向 team 对象，而是 window (默认绑定)
      console.log(`${member} is on team ${this.name}`);
    });
  }
};
team.showMembers();

1
2
Alice is on team undefined
Bob is on team undefined

解决方案: 使用箭头函数，this 会被自动绑定到 showMembers 方法的 this，也就是 team 对象。

1
2
3
4
5
6
7
8
9
10
11

const team = {
  name: "Prorise Devs",
  members: ["Alice", "Bob"],
  showMembers: function() {
    this.members.forEach(member => {
      // 箭头函数没有自己的 this，它会“继承”外层 showMembers 的 this
      console.log(`${member} is on team ${this.name}`);
    });
  }
};
team.showMembers();

1
2
Alice is on team Prorise Devs
Bob is on team Prorise Devs

2.6. 本章核心速查

核心速查总结

第三章：内置对象与数据结构：从 API 到内部原理

在本章中，我们将深入探索数据的组织与处理：

1. 首先，我们将从 Array 开始，不仅学习其丰富的 API，更要理解其作为动态集合的性能考量与函数式编程的应用。
2. 接着，我们将探讨 String，重点是理解其“不可变性”这一核心原理及其对程序性能的深远影响。
3. 然后，我们将对 Object、Map 和 Set 进行深度对比，分析它们作为键值对集合的优劣与底层差异。
4. 最后，我们将快速浏览 JSON、Math 和 Date 等实用工具对象，掌握它们在实际开发中的最佳实践。

3.1. 数组 (Array)：动态集合与性能考量

在几乎所有的编程语言中，数组都是一种基础且重要的数据结构。然而，JavaScript 的 Array 与 C++/Java 等语言中的传统数组在底层实现上存在着根本性的区别。

3.1.1. 数组的本质：动态对象而非连续内存

核心原理：传统数组（如 C++ 中的 int arr[10]）是一段 连续的、固定大小的内存空间，访问元素（arr[i]）可以通过简单的指针运算实现，速度极快 (O(1))。

而 JavaScript 的 Array 本质上是一种特殊的对象，其键是整数索引，但它 并不保证内存的连续性。这赋予了它极大的灵活性（如动态增删、存储不同类型元素），但也带来了性能上的复杂性。

为了优化性能，V8 等现代 JavaScript 引擎内部会将数组分为两种主要模式：

• 密集数组: 当数组元素是连续的时（例如 [1, 2, 3]），引擎会为其分配连续的内存，实现类似传统数组的快速访问。这是性能最优的模式。
• 稀疏数组: 当数组存在空位时（例如 const a = [1, , 3]; a[1000] = 5;），引擎会将其降级为更慢的哈希表/字典结构来存储。对稀疏数组的操作会比密集数组慢得多。

3.1.2. 基础操作 API：用法与副作用分析

在对数组进行操作时，一个至关重要的考量是该操作是否会修改原数组。这种修改被称为 副作用 或 可变性。

产生副作用（修改原数组）的常用方法:

• push(): 在数组末尾添加一个或多个元素，返回新的长度。
• pop(): 删除并返回数组的最后一个元素。
• shift(): 删除并返回数组的第一个元素。
• unshift(): 在数组开头添加一个或多个元素，返回新的长度。
• splice(start, deleteCount, ...items): 万能方法，可以从 start 索引开始，删除 deleteCount 个元素，并插入 items。它返回被删除元素的数组。

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
26
27
28
29
30
31

const numbers = [10, 20, 30, 40];

// push - 往后方推入数组
console.log("--- push ---");

numbers.push(50)
console.log('更新后的数组:', numbers); // [10, 20, 30, 40, 50]

// pop - 弹出数组最后一个元素
console.log("--- pop ---");
const last = numbers.pop();
console.log('弹出的元素为:', last); // 50
console.log('弹出后的数组为:', numbers);  // [10, 20, 30, 40]

// shift - 弹出数组第一个元素
console.log("--- shift ---");
const first = numbers.shift();
console.log('弹出的元素为:', first); // 10
console.log('弹出后的数组为:', numbers);  // [20, 30, 40]

// unshift - 往前方推入数组
console.log("--- unshift ---");
numbers.unshift(5);
console.log('更新后的数组:', numbers); // [5, 20, 30, 40]

// splice(start, deleteCount, items) - 可以从 `start` 索引开始，删除 `deleteCount` 个元素，并插入 `items`。
// [5,20,30,40]
console.log("--- splice ---");
const deleted = numbers.splice(1, 2); // 从索引 1 开始删除 2 个元素
console.log('删除的元素为:', deleted); // [20, 30]
console.log('更新后的数组为:', numbers); // [ 5, 40 ]

1
2
3
4
5
6
7
8
9
10
11
12
13
--- push ---
更新后的数组: [ 10, 20, 30, 40, 50 ]
--- pop ---
弹出的元素为: 50
弹出后的数组为: [ 10, 20, 30, 40 ]
--- shift ---
弹出的元素为: 10
弹出后的数组为: [ 20, 30, 40 ]
--- unshift ---
更新后的数组: [ 5, 20, 30, 40 ]
--- splice ---
删除的元素为: [ 20, 30 ]
更新后的数组为: [ 5, 40 ]

不产生副作用（返回新数组）的常用方法:

• slice(start, end): 提取从 start 到 end（不含 end）的元素，返回一个 新数组，原数组不变。
• concat(...items): 连接多个数组或值，返回一个 新数组。

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

const original = [1,2,3,4]
const sliced = original.slice(1,3) // 相当于提取 1 和 2
console.log("---slice---");

console.log('Sliced:', sliced);     // [2, 3]
console.log('Original:', original); // [1, 2, 3, 4] (原数组未被修改)

const original_2 = [5,6,7,8]
const concat_arry = original.concat(original_2)
console.log("---concat---");
console.log('Concat:', concat_arry); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log('Original:', original); // [1, 2, 3, 4] (原数组未被修改)

1
2
3
4
5
6
7
8
9
10
console.log("---slice---");

console.log('Sliced:', sliced);     // [2, 3]
console.log('Original:', original); // [1, 2, 3, 4] (原数组未被修改)

const original_2 = [5,6,7,8]
const concat_arry = original.concat(original_2)
console.log("---concat---");
console.log('Concat:', concat_arry); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log('Original:', original); // [1, 2, 3, 4] (原数组未被修改)

3.1.3. 高阶函数与函数式编程范式

核心思想: 所谓高阶函数，就是指可以接受函数作为参数，或者将函数作为返回值的函数。map, filter, reduce 是数组最重要的三个高阶函数，它们完美体现了 不变性 原则——即从不修改原数组，而是返回一个全新的、经过处理的数组。

map(callback)

作用: 遍历数组，对每个元素执行 callback 函数，并将每次执行的 返回值 收集起来，组成一个 新的数组 返回。

业务场景: 你有一个商品价格列表，需要生成一个包含税后价格的新列表。

1
2
3
4
5
6
7
8
9

const prices = [100, 200, 350];
const TAX_RATE = 1.1;

// 使用 map 生成税后价格数组
// 在这里我们相当于 map 中进行了一个箭头函数，他会对于数组的每一个元素进行一次函数操作
const pricesWithTax = prices.map(price => price * TAX_RATE);

console.log('Prices with tax:', pricesWithTax);
console.log('Original prices:', prices); // 原数组不受影响

1
2
Prices with tax: [ 110, 220, 385 ]
Original prices: [ 100, 200, 350 ]

filter(callback)

作用: 遍历数组，对每个元素执行 callback 函数。如果 callback 返回 true，则保留该元素，否则丢弃。最后将所有保留的元素组成一个 新的数组 返回。

业务场景: 你有一个用户列表，需要筛选出所有已成年的用户。

1
2
3
4
5
6
7
8

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 17 },
    { name: 'Cathy', age: 30 }
];

const adults = users.filter(user => user.age > 18);
console.log('Adult users:', adults);

1
Adult users: [ { name: 'Alice', age: 25 }, { name: 'Cathy', age: 30 } ]

reduce(callback, initialValue)

作用: 数组的“聚合器”。它接收一个回调函数和一个可选的初始值。它会遍历数组，将上一次回调的返回值（accumulator）和当前元素（currentValue）传入下一次回调，最终将数组“减少”为一个单一的值。

业务场景: 计算购物车中所有商品的总价。

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

const cart = [
  { product: 'Laptop', price: 1200 },
  { product: 'Mouse', price: 50 },
  { product: 'Keyboard', price: 100 }
];

// 0 是 accumulator 的初始值
const totalPrice = cart.reduce((accumulator, currentItem) => {
  return accumulator + currentItem.price;
}, 0);

console.log('Total price:', totalPrice); // 1350

1
Total price: 1350

3.1.4. 排序与搜索的陷阱

sort([compareFunction])

sort() 方法会 就地 对数组元素进行排序（即修改原数组）。它最大的陷阱在于其默认行为。

核心陷阱: 如果不提供 条件，sort() 会将所有元素转换为 字符串，然后按 UTF-16 编码顺序进行排序。

1
2
3
4

const numbers = [1, 10, 2, 21, 5];
numbers.sort(); // 默认排序

console.log(numbers);

1
[ 1, 10, 2, 21, 5 ]

解决方案: 提供一个比较函数 (a, b)。

• 如果返回 a - b，则为升序排序。
• 如果返回 b - a，则为降序排序。

1
2
3
4

const numbers = [1, 10, 2, 21, 5];
// 提供比较函数以实现正确的数字升序排序
numbers.sort((a, b) => a - b);
console.log(numbers);

1
[ 1, 2, 5, 10, 21 ]

find() vs indexOf()

• indexOf(value): 返回指定 value 在数组中首次出现的 索引，如果不存在则返回 -1。它只能用于查找原始类型值。
• find(callback): 返回数组中满足 callback 函数的 第一个元素的值，如果不存在则返回 undefined。它非常适合用来查找对象数组中的特定对象。

1
2
3
4
5
6
7
8
9
10
11

const users = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 17 },
    { name: 'Cathy', age: 30 }
];

const indexOfUser = users.findIndex(user => user.name == "Bob")
console.log(indexOfUser); // 1

const findUser = users.find(user => user.name == "Bob")
console.log(findUser); // { name: 'Bob', age: 17 }

3.1.5. 迭代协议：for...of 背后的原理

核心原理: for...of 循环之所以能遍历数组、字符串、Map、Set 等，是因为这些对象都遵守了 Iterable 协议。

一个对象要成为“可迭代”的，它必须实现一个 [Symbol.iterator] 方法。这个方法返回一个 迭代器 (Iterator) 对象，该对象有一个 next() 方法。每次调用 next()，它会返回一个形如 { value: ..., done: boolean } 的对象，直到遍历结束 done 变为 true。

for...of 循环就是这个过程的语法糖。理解这一点有助于你明白为什么 for...of 不能用于遍历普通对象（因为它们默认不是可迭代的）。

1
2
3
4
5
6

const arr = ['a', 'b'];
const iterator = arr[Symbol.iterator]();

console.log(iterator.next()); // { value: 'a', done: false }
console.log(iterator.next()); // { value: 'b', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

3.2. 字符串 (String)：不可变性与高效处理

3.2.1. 字符串的不可变性原理

核心原理: 与数组不同，JavaScript 中的字符串是 不可变的。这意味着一旦一个字符串被创建，它的内容就不能被改变。所有看起来像在修改字符串的方法（如 replace(), toUpperCase()），实际上都是在 返回一个全新的字符串，而原始字符串保持不变。

1
2
3
4
5
6
7
8
9

let str = "hello";
let upperStr = str.toUpperCase();

console.log('upperStr:', upperStr); // "HELLO"
console.log('original str:', str);   // "hello" (原字符串未变)

// 试图修改字符串的某个字符是无效的
str[0] = 'H';
console.log('After modification attempt:', str); // "hello"

1
2
3
upperStr: HELLO
original str: hello
After modification attempt: hello

性能影响: 字符串的不可变性意味着在循环中用 + 或 += 来拼接大量字符串时，性能会很差。因为每次拼接都会创建一个新的中间字符串，并可能引发垃圾回收。

痛点场景:

1
2
3
4
5

let longString = "";
// 性能不佳！会创建大量中间字符串
for (let i = 0; i < 10000; i++) {
  longString += "text";
}

解决方案: 在需要拼接大量字符串时，更高效的做法是先将各部分放入一个数组，最后用 join('') 方法一次性合并。

1
2
3
4
5

const parts = [];
for (let i = 0; i < 10000; i++) {
  parts.push("text");
}
const longString = parts.join(''); // 高效得多

3.2.2. 现代字符串操作

模板字符串 (Template Literals)

ES6 引入的模板字符串（使用反引号 `）是处理动态文本的最佳方式，它支持内嵌表达式 ${...} 和多行文本，完全取代了传统的 + 拼接方式。

1
2
3
4
5
6
7

const user = { name: 'Prorise', plan: 'Premium' };
const welcomeMessage = `
  Hello ${user.name},
  Welcome to our service.
  Your current plan is: ${user.plan}.
`;
console.log(welcomeMessage);

常用 API

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

// 字符串常用方法演示
let text = "Hello, JavaScript world! ";
let paddedText = "  some text  ";

// length - 获取字符串长度 (属性)
console.log(text.length); // 25 (注意末尾的空格)

// toLowerCase() / toUpperCase() - 大小写转换
console.log(text.toLowerCase()); // "hello, javascript world! "
console.log(text.toUpperCase()); // "HELLO, JAVASCRIPT WORLD! "

// trim() - 移除两端空白
console.log(paddedText.trim()); // "some text"

// includes() - 检查是否包含子字符串
console.log(text.includes("JavaScript")); // true
console.log(text.includes("Python"));     // false

// startsWith() / endsWith() - 检查开头或结尾
console.log(text.startsWith("Hello")); // true
console.log(text.trim().endsWith("!")); // true (先移除末尾空格再判断)

// indexOf() - 查找索引
console.log(text.indexOf("Java")); // 7
console.log(text.indexOf("Python")); // -1

// slice() - 提取子字符串
console.log(text.slice(0, 5));   // "Hello"
console.log(text.slice(7, 17));  // "JavaScript"

// split() - 按分隔符分割成数组
console.log(text.trim().split(" "));    // ["Hello,", "JavaScript", "world!"]
console.log(text.split(","));    // ["Hello", " JavaScript world! "]

// replace() - 替换第一个匹配项
console.log(text.replace("JavaScript", "Node.js")); // "Hello, Node.js world! "

// replaceAll() - 替换所有匹配项
let repeated = "apple, apple, apple";
console.log(repeated.replaceAll("apple", "orange")); // "orange, orange, orange"

// padStart() - 头部填充
let month = "5";
console.log(month.padStart(2, "0")); // "05" (常用于日期格式化)

3.2.3. 正则表达式 (RegExp) 入门

业务场景: 假设你需要验证用户输入的邮箱地址是否合法，或者从一段文本中提取所有电话号码。用 if/else 等传统方法处理会非常繁琐且极易出错。这正是正则表达式的用武之地。

在 JavaScript 中创建正则表达式

1. 字面量创建 (推荐): 语法为 /pattern/flags，在脚本加载时编译，性能更高。

   1	const regex = /[a-z]+/g; // 匹配所有小写字母组合

2. 构造函数创建: 语法为 new RegExp("pattern", "flags")，在运行时编译，适用于模式是动态的（例如，来自用户输入）场景。

   1 2	let userInput = "abc"; const dynamicRegex = new RegExp(userInput, "i"); // 根据用户输入动态创建，忽略大小写

核心概念速览

在 JavaScript 中的实战方法

• regexp.test(string): 验证。检查字符串是否匹配模式，返回 true 或 false。这是最常用的验证方法。
• string.match(regexp): 提取。返回一个包含匹配结果的数组。如果正则有 g 标志，返回所有匹配的子串；否则只返回第一个匹配项及其捕获组的详细信息。
• string.replace(regexp, newValue): 替换。查找匹配项并用新值替换。结合 g 标志可以实现全局替换。

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

// --- 1. 使用 .test() 进行验证 ---
// 邮箱正则表达式：简单的邮箱格式检查
// 匹配：任意字符 + @ + 任意字符 + . + 任意字符
const emailRegex = /.+@.+\..+/;
const email1 = "test@prorise.com";
const email2 = "invalid-email@";

console.log(`是否 '${email1}' 有效? ${emailRegex.test(email1)}`); // 是否 'test@prorise.com' 有效? true
console.log(`是否 '${email2}' 有效? ${emailRegex.test(email2)}`); // 是否 'invalid-email@' 有效? false

// --- 2. 使用 .match() 进行提取 ---
const text = "My numbers are 123 and 456, not 789.";
const numberRegex = /\d+/g; // \d+ 匹配一个或多个数字, g 表示全局查找

console.log(text.match(numberRegex)); // ["123", "456", "789"]

// --- 3. 使用 .replace() 进行替换 ---
const message = "JavaScript is great. I love JavaScript!";
const jsRegex = /javascript/ig; // i 表示忽略大小写, g 表示全局
// 将所有 "JavaScript" (不区分大小写) 替换为 "JS"
console.log(message.replace(jsRegex, "JS")); // "JS is great. I love JS!"

3.3. 键值对集合：Object, Map, Set 的深度对比

在 JavaScript 中，存储键值对数据最常用的方式是 Object。但 ES6 引入的 Map 和 Set 提供了更专业、更高效的解决方案。

3.3.1. 作为字典的 Object

优势: 语法简洁，易于创建和访问。
原生缺陷:

1. 键类型限制: 对象的键只能是 String 或 Symbol 类型。任何非字符串的键都会被隐式转换为字符串。
2. 原型链污染风险: 如果不小心使用了 __proto__ 等内置属性名作为键，可能会覆盖原型链上的方法，导致意外行为或安全漏洞。
3. 迭代不便: 遍历对象的属性需要 for...in 或 Object.keys()，不如 Map 和 Set 的直接迭代方便。

3.3.2. Map：为“字典”场景而生的数据结构

Map 是一个真正的哈希表，它的设计完全是为了高效地存储和检索键值对。

与 Object 的核心对比:

业务场景: 当你需要一个键不是字符串的字典，或者需要频繁地对集合进行增删操作时，Map 是不二之选。

1
2
3
4
5
6
7
8
9
10

const user1 = { id: 1 };
const user2 = { id: 2 };

const roles = new Map();
// 使用对象作为键
roles.set(user1, 'Admin');
roles.set(user2, 'Editor');

console.log('Role of user1:', roles.get(user1));
console.log('Map size:', roles.size);

1
2
Role of user1: Admin
Map size: 2

3.3.3. Set：唯一值的数学集合

Set 对象允许你存储任何类型的 唯一值，无论是原始值或者是对象引用。

与 Array 的核心对比:

业务场景: 数组去重、检查一个值是否存在于一个大集合中。

性能差异是关键。检查一个元素是否存在于一个有 100 万个元素的 Set 中，速度几乎和检查 10 个元素一样快。而对于数组，则需要遍历整个数组，速度会慢 10 万倍。

1
2
3
4
5
6
7
8
9
10
11

const numbers = [1, 2, 2, 3, 4, 4, 5];

// 1. 数组去重
const uniqueNumbers = new Set(numbers);
console.log('Unique numbers:', uniqueNumbers);
// 可轻松转回数组 通过...解构赋值语法将他拆散变为数组
console.log('Back to array:', [...uniqueNumbers]);

// 2. 成员检查
console.log('Does Set have 3?', uniqueNumbers.has(3)); // true
console.log('Does Set have 6?', uniqueNumbers.has(6)); // false

1
2
3
4
Unique numbers: Set(5) { 1, 2, 3, 4, 5 }
Back to array: [ 1, 2, 3, 4, 5 ]
Does Set have 3? true
Does Set have 6? false

3.4. 其他实用内置对象

3.4.1. JSON：通用数据交换格式

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，已成为 Web API 通信的事实标准。

• JSON.stringify(JavaScript值[, 转换函数, 缩进]): 将 JavaScript 的值（如对象、数组）转换为 JSON 字符串。

  • JavaScript值: 必需，要被转换成 JSON 字符串的对象、数组或其他值。
  • 转换函数: 可选，一个函数，用于在序列化过程中改变值的行为。
  • 缩进: 可选，用于美化输出的 JSON 字符串，可以是数字（代表空格数）或字符串（如 '\t'）。

• JSON.parse(JSON字符串[, 还原函数]): 将一个 JSON 字符串 解析为对应的 JavaScript 值。

  • JSON字符串: 必需，一个符合 JSON 格式规范的字符串。
  • 还原函数: 可选，一个函数，用于在解析后对生成的值进行转换。

核心规范与安全:

• JSON 格式比 JS 对象字面量更严格：键必须是双引号包裹的字符串。
• JSON 不能表示 undefined, Symbol, 函数等。
• 在解析来自不受信任来源的 JSON 字符串时要小心，JSON.parse 本身是安全的，但解析后的数据可能被恶意利用。reviver 参数可用于在解析过程中对数据进行处理和校验。

1
2
3
4
5
6

const user = { name: "Prorise", id: 1, joined: new Date() };
const jsonString = JSON.stringify(user, null, 2); // 第三个参数用于格式化输出
console.log(jsonString);

const parsedUser = JSON.parse(jsonString);
console.log(parsedUser.name);

1
2
3
4
5
6
{
  "name": "Prorise",
  "id": 1,
  "joined": "2025-08-27T12:48:08.066Z"
}
Prorise

3.4.2. Math 与 Date

• Math: 一个静态对象，提供了常用的数学常数和函数，如 Math.random() (生成 0-1 之间的随机数), Math.max(), Math.floor() 等。
• Date: 用于处理日期和时间。创建一个 new Date() 实例来表示特定时间点。

3.5. 本章核心原理速查与高频面试题

核心原理速查

3.6 课后小结

第四章：对象、原型与继承

在本章中，我们将沿着一条从微观到宏观的路径，彻底解构 JavaScript 的对象世界：

1. 首先，我们将深入一个 对象的内部，了解其属性的底层特性。
2. 接着，我们将探讨 构造函数 这一批量创建对象的模式及其内存效率问题。
3. 然后，我们将引出解决方案——原型与原型链，这是理解 JS 继承机制的唯一钥匙。
4. 在此基础上，我们将回顾并推演 JS 中 经典继承模式的演进历史，理解每种模式解决的问题与引入的新问题。
5. 最后，我们将学习现代 JS 提供的、用于操作对象和原型的 一系列工具方法。

4.1. 对象基础回顾：属性的内部特性

我们通常通过点或方括号来为对象赋值，但这只是表象。在 JavaScript 引擎内部，每个属性都拥有一组 内部特性，它们描述了属性的行为。这些特性被封装在一个名为 属性描述符 的对象中。

属性分为两类：数据属性 和 访问器属性。

1
2
3
4

const user = {};
user.id = 1;
user.id = 2;        // 被成功改写
console.log(user.id); // 2

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

const user = {}

Object.defineProperty(user, 'id', {
  value: 1,
  writable: false,
  enumerable: true,
  configurable: false
});

console.log('Initial ID:', user.id); // 1
user.id = 2;  // 严格模式抛出 TypeError；非严格模式静默失败
console.log('Final ID:', user.id);   // 1

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
26

const user = {
  firstName: 'Prorise',
  lastName: 'Blog'
};

Object.defineProperty(user, 'fullName', {
  enumerable: true,
  configurable: true,
  get() {
    return `${this.firstName} ${this.lastName}`;
  },
  set(value) {
    const [first, last] = value.split(' ');
    this.firstName = first;
    this.lastName = last;
  }
});

console.log(user.fullName);      // "Prorise Blog"

user.lastName = 'Docs';
console.log(user.fullName);      // "Prorise Docs"

user.fullName = 'Awesome User';
console.log(user.firstName);     // "Awesome"
console.log(user.lastName);      // "User"

4.2. 构造函数模式

痛点背景: 如果我们需要创建多个结构相同的对象（例如多个用户），使用对象字面量会导致大量重复代码。

1
2
3

const user1 = { name: 'Alice', age: 25 };
const user2 = { name: 'Bob', age: 30 };
// ... 代码非常冗余

解决方案: 使用 构造函数 (Constructor) 模式。构造函数本质上是一个普通的函数，但按照惯例，我们用 new 关键字来调用它，用于“构造”一个新的对象实例。

工作原理: 当你使用 new 关键字调用一个函数时，会自动发生以下四件事：

1. 在内存中创建一个新的空对象。
2. 将这个新对象的内部 [[Prototype]] 属性（在代码中通过 __proto__ 访问）指向构造函数的 prototype 属性。
3. 将构造函数内部的 this 指向这个新对象。
4. 执行构造函数内部的代码（为新对象添加属性）。
5. 如果构造函数没有显式返回其他对象，则隐式地返回这个新创建的对象。

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

// 构造函数，首字母通常大写
function User(name, age) {
  // this 指向新创建的实例
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, I am ${this.name}.`);
  };
}

const user1 = new User('Alice', 25);
const user2 = new User('Bob', 30);

user1.greet();
user2.greet();

1
2
Hello, I am Alice.
Hello, I am Bob.

局限性: 构造函数模式虽然解决了代码复用问题，但引入了一个新的 性能问题。每个由 User 构造函数创建的实例，都在内存中拥有一个 全新的、独立的 greet 方法副本。如果有一万个用户实例，就会有一万个功能完全相同的 greet 函数，这造成了极大的内存浪费。

1

console.log(user1.greet === user2.greet); // false，它们是两个不同的函数

4.3. 原型 (prototype) 与原型链 (__proto__)

承上启下: 为了解决构造函数模式中方法无法共享的问题，JavaScript 引入了其继承模型的核心——原型 (Prototype)。

核心原理: 在 JavaScript 中，每个函数 在创建时都会自动获得一个 prototype 属性。这个 prototype 属性的值是一个对象，我们称之为 原型对象。这个原型对象的作用就是作为一个公共的存储空间，存放所有需要被该构造函数创建的实例所 共享 的属性和方法。

解决方案: 我们可以将需要共享的方法（如 greet）从构造函数内部移到其 prototype 对象上。

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

function User(name, age) {
  this.name = name;
  this.age = age;
}

// 将 greet 方法定义在 User 的原型对象上
User.prototype.greet = function() {
  console.log(`Hello, I am ${this.name}.`);
};

const user1 = new User('Alice', 25);
const user2 = new User('Bob', 30);

user1.greet();
user2.greet();

// 验证方法是否共享
console.log(user1.greet === user2.greet); // true!

1
2
3
Hello, I am Alice.
Hello, I am Bob.
true

原型链 (Prototype Chain)

那么，user1 实例本身并没有 greet 方法，它是如何调用到 User.prototype.greet 的呢？答案就是 原型链。

1. 每个由构造函数创建的实例对象，都有一个内部属性 [[Prototype]]（在代码中通常可以通过非标准的 __proto__ 访问），这个属性指向其构造函数的 prototype 对象。
   user1.__proto__ === User.prototype // true

2. 当你试图访问一个对象的属性（如 user1.greet）时，JavaScript 引擎会首先在 对象自身 查找该属性。

3. 如果找不到，引擎就会通过 __proto__ 链接，去其 原型对象 (User.prototype) 上查找。

4. 如果原型对象上还找不到，而原型对象本身也是一个对象，它也有自己的 __proto__，引擎会继续沿着这条链向上查找，直到找到该属性或到达原型链的顶端 (Object.prototype 的 __proto__ 指向 null)。

这条由 __proto__ 串联起来的对象链条，就是 原型链。

4.4. 继承模式的演进

基于原型链，JavaScript 开发者在历史上探索出了多种继承模式，每种模式都试图解决前一种模式的缺陷。正是因为这些方式的不断迭代，后来各大编程语言才推出了 Class 关键字以及 Super 关键字，了解这些演进可以让你对面向对象有更深刻的认知

1. 原型链继承

实现: 将子类的原型直接赋值为父类的一个实例。

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

function Parent(name) { 
    this.parentProp = 'Parent'; 
    this.sharedArray = []; // 引用类型属性
    this.name = name || 'default';
}
Parent.prototype.getParentProp = function() { return this.parentProp; };

function Child() { this.childProp = 'Child'; }
Child.prototype = new Parent(); // 核心

const child1 = new Child();
const child2 = new Child();

// 缺点 1：父类实例的引用类型属性被所有子类实例共享
child1.sharedArray.push('item1');
console.log(child1.sharedArray); // ['item1']
console.log(child2.sharedArray); // ['item1'] - 被意外修改了！

// 缺点 2：无法向父类构造函数传递参数
console.log(child1.name); // 'default' - 无法传递自定义 name 参数
console.log(child1.getParentProp()); // 'Parent'

• 优点: 简单，直观地利用了原型链。
• 缺点:
  1. 父类实例的属性（parentProp）变成了子类原型的一部分，会被所有子类实例共享。如果这个属性是引用类型（如数组），一个实例的修改会影响所有其他实例。
  2. 创建子类实例时，无法向父类构造函数传递参数。

2. 构造函数窃取

实现: 在子类构造函数中，使用 .call() 或 .apply() 调用父类构造函数。

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

function Parent(name) { this.name = name; this.colors = ['red']; }
Parent.prototype.sayHello = function () { return `Hello, I'm ${this.name}`; }; // 添加原型方法

function Child(name) {
    Parent.call(this, name); // 核心
}

const child1 = new Child('c1');
const parent = new Parent();
child1.colors.push('blue');


console.log(child1.name, child1.colors); // c1, ['red', 'blue']
console.log(parent.colors); // 优点：他的属性没有被影响 [ 'red' ] 
console.log(child1.sayHello); // undefined - 缺点：无法访问父类原型方法

• 优点: 解决了原型链继承的两个主要缺点：可以向父类传参，且父类实例属性不会被共享。
• 缺点: 父类原型上的方法没有被继承。子类实例无法访问 Parent.prototype 上的方法。

3. 组合继承

实现: 结合以上两种模式，用构造函数窃取继承实例属性，用原型链继承原型方法。

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

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

function Child(name, age) {
  Parent.call(this, name); // 第一次调用 Parent
  this.age = age;
}
Child.prototype = new Parent(); // 第二次调用 Parent
Child.prototype.constructor = Child; // 修复 constructor 指向

const child = new Child('c1', 10);
child.sayName(); // 'c1'

• 优点: 解决了之前两种模式的所有问题，是 JavaScript 中最常用的继承模式之一。
• 缺点: 父类构造函数被调用了两次：一次在 Parent.call，一次在 new Parent()。这会创建一份多余的父类实例属性在子类原型上，造成了轻微的性能浪费，且还需要频繁的修复 constructor 指向

4. 寄生组合式继承

实现: 这是对组合继承的优化，被认为是 ES6 class 出现之前最理想的继承方案。它通过 Object.create() 来避免调用第二次父类构造函数。

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

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

function Child(name, age) {
  Parent.call(this, name); // 继承属性
  this.age = age;
}

// 核心优化：
// 1. 创建一个父类原型的副本
// 2. 增强这个副本
// 3. 将增强后的副本赋值给子类原型
const parentPrototype = Object.create(Parent.prototype);
parentPrototype.constructor = Child;
Child.prototype = parentPrototype;

const child = new Child('c1', 10);
child.sayName();

• 优点: 高效。只调用一次父类构造函数，并且原型链保持完整，但这样的代码并没有办法称得上优雅

4.5. Object 的静态方法：操作对象的标准化工具箱

在上一节，我们历经了从“原型链”到“寄生组合式继承”的漫长探索。这个过程虽然揭示了 JavaScript 继承的本质，但也暴露了一个问题：开发者长期以来依赖一些非标准（如 __proto__）或较为繁琐的模式来操作原型。

为了解决这一问题，ES5 和 ES6 正式标准化了一套静态方法，它们如同一个官方提供的“瑞士军刀”，为我们提供了更安全、更可靠、更清晰的方式来与对象及其底层原型进行交互。

主题一：原型链的标准化操作

这些方法是直接针对我们刚刚探讨的原型继承问题的官方解决方案。

这三个方法构成了现代 JavaScript 中直接操作对象 [[Prototype]]（即对象原型）的标准 API。它们分别用官方、可靠的方式解决了原型继承、读取和写入这三个核心场景下的历史痛点，取代了过去非标准或有副作用的实现技巧。

尤其需要注意的是 Object.setPrototypeOf，在对象创建后修改其原型是一个对性能极不友好的操作，会破坏 JavaScript 引擎的内部优化，应在开发中极力避免使用。

主题二：属性的遍历与枚举

历史痛点: for...in 循环是遍历对象属性的传统方式，但它存在两个主要问题：1. 它会遍历到原型链上可枚举的属性；2. 必须配合 hasOwnProperty() 才能过滤出对象自身的属性，写法繁琐。

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

// 痛点演示
function Parent() { this.parentProp = 'Parent'; }
const p = new Parent();

const obj = Object.create(p);
obj.ownProp = 'Own';

for (const key in obj) {
  // 如果不加这个判断，'parentProp' 也会被打印出来
  if (obj.hasOwnProperty(key)) {
    console.log(key); // ownProp
  }
}

解决方案: ES5/ES6 提供了一系列方法，用于精确地获取对象 自身的、可枚举的 属性，让遍历更安全、更直接。

• Object.keys(obj): 返回一个由对象 自身可枚举属性名 组成的数组。
• Object.values(obj): 返回一个由对象 自身可枚举属性值 组成的数组。
• Object.entries(obj): 返回一个由对象 自身可枚举键值对 [key, value] 组成的二维数组。

1
2
3
4
5
6

const user = { name: 'Prorise', role: 'Admin' };
Object.defineProperty(user, 'id', { value: 1, enumerable: false }); // id 不可枚举

console.log(Object.keys(user));
console.log(Object.values(user));
console.log(Object.entries(user));

1
2
3
[ 'name', 'role' ]
[ 'Prorise', 'Admin' ]
[ [ 'name', 'Prorise' ], [ 'role', 'Admin' ] ]

主题三：对象的合并与克隆

历史痛点: 在 ES6 之前，要合并多个对象的属性，需要手动遍历源对象并逐一赋值给目标对象，代码冗长。

解决方案: Object.assign() 与现代的扩展运算符 ...

• Object.assign(target, ...sources): 将一个或多个源（sources）对象中所有 可枚举的自有属性 复制到目标（target）对象。它会修改并返回 target 对象。这是一个 浅拷贝。
• 扩展运算符 ... (Spread Syntax): ES6 引入的语法糖，是目前 创建合并后新对象 的首选方式，语法更简洁，意图更清晰。

1
2
3
4
5
6
7
8
9
10

const defaults   = { theme: 'dark', version: '1.0' };
const userConfig = { version: '1.2', showAvatar: true };

// 扩展运算符（更简洁，社区首选）
const finalSpread = { ...defaults, ...userConfig };
console.log('Spread:', finalSpread);

// Object.assign（需传入空对象）
const finalAssign = Object.assign({}, defaults, userConfig);
console.log('Assign:', finalAssign);

1
2
3
4
5
6
7

const user       = { name: 'Prorise' };
const permissions = { canEdit: true, canDelete: false };

// 直接在 user 上合并属性
Object.assign(user, permissions);

console.log('Mutated user:', user); // Mutated user: { name: 'Prorise', canEdit: true, canDelete: false }

4.6. 本章核心原理与课后小结

核心原理速查

课后小结

第五章：面向对象编程 (OOP)：从语法到思想的结构化之道

在本章，我们将完成一次从底层原理到上层建筑的思维跨越：

1. 首先，我们将探讨 OOP 思想为何在大型 JavaScript 项目中至关重要，直面“代码随地乱飞”的开发痛点。
2. 接着，我们将逐一学习 class 的核心语法 (constructor, static, #private)，并时刻与第四章的原型实现进行对比，理解其“语法糖”的本质。
3. 然后，我们将聚焦于 extends 和 super，看看它们是如何将复杂的“寄生组合式继承”和“构造函数窃取”简化为单个关键字的。
4. 最后，我们将把 OOP 思想置于 现代前端的生态 中，探讨它在 Angular/NestJS 中的核心地位，以及如何将其分层思想与 React/Vue 的函数式范式进行完美融合。

5.1. OOP 思想在 JavaScript 中的价值

承上启下: 在我们深入 class 语法之前，必须先回答一个根本问题：在一个以函数为一等公民、原型继承如此灵活的语言里，我们为什么还需要看似“刻板”的面向对象编程？

痛点背景：对于习惯了 Java/Spring Boot 这类强结构化框架的开发者而言，初入前端，特别是现代 React/Vue 的函数式组件世界，往往会感到一种“无序感”。数据状态、业务逻辑、API 请求散落在不同的自定义 Hooks 或 Composable 函数中，缺乏一个清晰的、高内聚的组织单元。总会感受到的“代码随地乱飞”。

OOP 思想为解决这一问题提供了强大的武器库：

• 结构化与封装: 这是 OOP 的核心价值。class 如同一张蓝图，它强制性地将数据（属性）和操作这些数据的行为（方法）紧密地捆绑在一个独立的、高内聚的单元里。当需要处理“用户”逻辑时，我们去找 User 类；需要处理“订单”逻辑，就去找 Order 类。这与在 Spring Boot 中寻找 UserService 或 OrderController 的思路是完全一致的。

• 继承: 允许创建子类来复用和扩展父类的功能，是构建可维护、可扩展代码库的基础。例如，一个 BaseApiController 可以封装通用的错误处理和请求逻辑，所有具体的业务 API 客户端只需继承它即可。

• 抽象与清晰的契约: class 通过其公共方法向外暴露一个清晰的“契约”，隐藏内部复杂的实现细节。这极大地降低了系统模块间的耦合度，使得大型项目得以协同开发和长期维护。

5.2. ES6 class：现代 OOP 的语法基石

现在，让我们来逐一解析 class 的语法，并看看它们分别对应着我们在第四章学到的哪些原型概念。

5.2.1. class 与 constructor：定义蓝图与实例化

class 提供了一个定义“类”的清晰结构。constructor 方法是类的默认构造函数，通过 new 命令创建对象实例时，会自动调用该方法。

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

class User {
  // constructor 负责初始化实例属性
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // 实例方法
  greet() {
    console.log(`Hello, I am ${this.name}.`);
  }
}

const user1 = new User('Alice', 25);
user1.greet();

与原型的联系 (Aha Moment!):

• class User {...} 的声明，本质上等同于我们第四章写的 function User(...) {} 构造函数。
• constructor 方法就是那个构造函数本身。
• greet() 这个实例方法，class 语法会自动地、正确地将其定义在 User.prototype 上，而不是在构造函数里为每个实例重复创建。这正是对第四章“构造函数性能缺陷”的完美优化。

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

// 上述 class 写法的 ES5 原型等价实现
function User(name, age) {
    this.name = name;
    this.age = age;
  }
  User.prototype.greet = function() {
    console.log(`Hello, I am ${this.name}.`);
  };
  
  const user1 = new User('Bob', 30);
  // 验证一下
  console.log(user1.greet === (new User()).greet); // true, 方法是共享的

5.2.2. 实例成员与 static 成员

• 实例成员: 定义在 constructor 内部（通过 this）或类体顶层的属性，以及普通的方法。它们属于每一个对象实例。
• static 成员: 使用 static 关键字修饰的属性和方法。它们不属于任何实例，而是直接属于 类本身。

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

class User {
  // 实例属性
  name = 'Anonymous';

  // 静态属性
  static platform = 'Prorise Blog';

  constructor(name) {
    this.name = name;
  }

  // 静态方法
  static getPlatform() {
    return `This user is from ${this.platform}.`; // 静态方法中的 this 指向类本身
  }
}

const user = new User('Cathy');
console.log(user.name); // 'Cathy'
// console.log(user.platform); // undefined，实例无法访问静态成员

console.log(User.platform); // 'Prorise Blog'
console.log(User.getPlatform()); // "This user is from Prorise Blog."

与原型的联系:

• static 成员就是直接定义在 构造函数 这个对象上的属性和方法。它等同于：

  1 2 3

  function User() {} User.platform = 'Prorise Blog'; User.getPlatform = function() { /*...*/ };

5.2.3. 私有成员 (#)

历史痛点: 在原型时代，JavaScript 没有真正的私有成员。开发者只能通过“下划线命名约定”（如 _privateVar）来“提示”这是一个私有成员，但它在外部依然可以被随意访问和修改，封装性形同虚设。

解决方案: ES2022 引入了 # 前缀，用于定义 真正意义上的私有属性和方法。它们只能在类的内部被访问，外部访问会直接抛出语法错误。

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 User {
  #email; // 必须在类体顶层先声明私有字段

  constructor(name, email) {
    this.name = name;
    this.#email = email;
  }

  getEmail() {
    return this.#getFormattedEmail(); // 内部可以访问
  }

  #getFormattedEmail() { // 私有方法
    return `Email: ${this.#email}`;
  }
}

const user = new User('David', 'david@example.com');
console.log(user.getEmail()); // "Email: david@example.com"

try {
  console.log(user.#email); // 外部访问，将抛出错误
} catch (e) {
  console.error(e.message);
}

1
2
Email: david@example.com
Private field '#email' must be declared in an enclosing class

5.3. 继承 (extends) 与 super 关键字

这是 class 语法糖最强大的地方，它将我们第四章推导出的复杂继承模式，简化为了两个关键字。

5.3.1. extends：建立类之间的层级关系

extends 关键字用于让一个类（子类）继承另一个类（父类）。这意味着子类将自动获得父类所有非私有的属性和方法。

基础代码示例:

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

// 1. 定义一个父类
class Parent {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello from the Parent, my name is ${this.name}.`);
  }
}

// 2. 子类 Child 使用 extends 继承 Parent
class Child extends Parent {
  // 即使子类是空的，它也继承了 Parent 的所有东西
}

// 3. 创建子类的实例
const childInstance = new Child('Prorise');

// 4. 调用继承自父类的方法
childInstance.greet(); 
console.log(childInstance.name);

1
2
Hello from the Parent, my name is Prorise.
Prorise

与原型的联系 (The Ultimate Aha Moment!):

• class Child extends Parent {} 这一行代码，背后为你做了两件大事，完美对应了“寄生组合式继承”模式：
  1. 它将 Child.prototype 的 [[Prototype]] 设置为了 Parent.prototype (等同于 Object.create(Parent.prototype))，从而实现了原型方法的继承。
  2. 它还将 Child 构造函数自身的 [[Prototype]] 设置为了 Parent 构造函数，从而实现了静态成员的继承。

5.3.2. super()：在子类构造函数中调用父类

核心规则: 如果子类有 constructor，则 必须 在其中调用 super()，并且必须在使用 this 关键字之前调用。

与原型的联系:

• super() 在这里作为函数调用，等同于我们之前在子类构造函数中使用的 Parent.call(this, ...args)。它执行父类的构造函数，并将 this 绑定到当前子类的实例上，从而实现 实例属性的继承（即“构造函数窃取”）。

5.3.3. super.method()：在子类中调用父类的方法

当 super 作为对象使用时，它指向父类的原型。这允许我们在子类中调用被覆盖的父类方法，以实现功能的扩展而非完全重写。

综合代码示例 (extends, super(), super.method()):

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
26