【TS学习】（5）装箱和拆箱

在 JavaScript 和 TypeScript 中，装箱（Boxing） 和 拆箱（Unboxing） 是与原始类型（Primitive Types）和包装对象（Wrapper Objects）相关的概念。它们描述了原始值如何被转换为对象形式，以及对象形式的值如何被还原为原始值。

---

1. 装箱（Boxing）

(1) 定义

• 装箱 是指将原始值（如 string、number、boolean 等）临时转换为其对应的包装对象（如 String、Number、Boolean 等）。
• 这种转换是自动完成的，通常发生在需要调用原始值上的方法或属性时。

(2) 原因

• 原始值（Primitive Types）本身没有方法或属性，但 JavaScript 提供了对应的包装对象（如 String、Number、Boolean），这些包装对象提供了额外的功能。
• 当你尝试访问原始值的方法或属性时，JavaScript 会自动将原始值装箱为对应的包装对象，执行操作后再销毁包装对象。

示例

const str = "hello";
console.log(str.toUpperCase()); // 输出 "HELLO"

// 内部发生的装箱过程：
// 1. 将原始值 "hello" 转换为 String 对象：new String("hello")
// 2. 调用对象的 toUpperCase 方法
// 3. 销毁临时创建的 String 对象

(3) 常见包装对象

• String：对应原始类型 string
• Number：对应原始类型 number
• Boolean：对应原始类型 boolean
• Symbol：对应原始类型 symbol
• BigInt：对应原始类型 bigint

---

2. 拆箱（Unboxing）

(1) 定义

• 拆箱 是指将包装对象（如 String、Number、Boolean 等）还原为其对应的原始值。
• 这种转换可以是隐式的（自动完成）或显式的（通过调用包装对象的特定方法）。

(2) 原因

• 包装对象本质上是对象，而原始值更轻量且高效。
• 在某些场景下，需要将包装对象还原为原始值以进行计算或其他操作。

示例

const strObj = new String("hello");
console.log(typeof strObj); // 输出 "object"

// 拆箱：将包装对象还原为原始值
const str = strObj.valueOf();
console.log(typeof str); // 输出 "string"

(3) 常见拆箱方法

• valueOf()：返回包装对象对应的原始值。
• toString()：返回包装对象的字符串表示。

示例

const numObj = new Number(42);
console.log(numObj.valueOf()); // 输出 42（拆箱为 number 类型）
console.log(numObj.toString()); // 输出 "42"（拆箱为 string 类型）

---

3. 自动装箱和拆箱的过程

JavaScript 会在某些场景下自动进行装箱和拆箱操作，开发者无需手动干预。

(1) 自动装箱

• 当你尝试访问原始值的方法或属性时，JavaScript 会自动将原始值装箱为对应的包装对象。
• 执行完操作后，临时创建的包装对象会被销毁。

示例

const bool = true;
console.log(bool.toString()); // 输出 "true"

// 内部发生的装箱过程：
// 1. 将原始值 true 转换为 Boolean 对象：new Boolean(true)
// 2. 调用对象的 toString 方法
// 3. 销毁临时创建的 Boolean 对象

(2) 自动拆箱

• 当你需要对包装对象进行操作（如加法、比较等）时，JavaScript 会自动将其拆箱为原始值。

示例

const numObj = new Number(42);
console.log(numObj + 10); // 输出 52（自动拆箱为 number 类型）

// 内部发生的拆箱过程：
// 1. 调用 numObj.valueOf()，得到原始值 42
// 2. 执行加法操作

---

4. 手动装箱和拆箱

虽然 JavaScript 会自动处理装箱和拆箱，但在某些情况下，开发者可能需要手动进行这些操作。

(1) 手动装箱

• 使用构造函数（如 new String()、new Number() 等）显式创建包装对象。

示例

const strObj = new String("hello"); // 手动装箱
console.log(typeof strObj); // 输出 "object"

const numObj = new Number(42); // 手动装箱
console.log(typeof numObj); // 输出 "object"

注意事项

• 手动装箱会创建一个真正的对象，这可能会导致意外的行为。
• 包装对象与原始值的比较结果通常是 false，因为包装对象是引用类型。

示例

const str = "hello";
const strObj = new String("hello");

console.log(str === strObj); // false，因为一个是原始值，一个是对象
console.log(str == strObj); // true，因为 == 会先进行拆箱操作

(2) 手动拆箱

• 使用 valueOf() 或 toString() 显式将包装对象还原为原始值。

示例

const strObj = new String("hello");
const str = strObj.valueOf(); // 手动拆箱
console.log(typeof str); // 输出 "string"

const numObj = new Number(42);
const num = numObj.valueOf(); // 手动拆箱
console.log(typeof num); // 输出 "number"

---

5. 装箱和拆箱的注意事项

(1) 避免手动装箱

• 手动装箱会导致代码复杂化，并可能引发意外行为。
• 推荐直接使用原始值，而不是包装对象。

示例

// 不推荐：手动装箱
const strObj = new String("hello");

// 推荐：直接使用原始值
const str = "hello";

(2) 性能问题

• 装箱和拆箱操作会增加运行时开销，尤其是在频繁操作时。
• 直接使用原始值更加高效。

(3) TypeScript 的处理

• 在 TypeScript 中，原始类型（如 string、number）与包装对象（如 String、Number）是严格区分的。
• TypeScript 会提示你避免不必要的装箱操作。

示例

let str: string = "hello";
let strObj: String = new String("hello");

str = strObj; // 报错：不能将 String 分配给 string

---

6. 总结

• 装箱：
  • 将原始值临时转换为包装对象。
  • 自动发生于访问原始值的方法或属性时。
• 拆箱：
  • 将包装对象还原为原始值。
  • 可以是自动或手动完成。
• 最佳实践：
  • 避免手动装箱，优先使用原始值。
  • 理解装箱和拆箱的过程，有助于避免意外行为。