你不知道的JavaScript——包装类篇

在JavaScript中，原始值是不能拥有属性和方法的，属性和方法只有对象才能拥有。那么为什么我们常常能看见string.length，num.toFixed()呢，那我们就不得不了解一下包装类了，包装类（Wrapper Objects）是JavaScript为了便于操作基本数据类型而引入的一种特殊机制，它们允许开发者像操作对象一样操作原始值。

基本概念与三大包装类

JavaScript中有五种基本数据类型（也称为原始类型）：undefined、null、boolean、number、和string。通常情况下，这些类型的数据不具备属性或方法，因为它们不是对象。然而，在某些特定情境下，JavaScript会自动将这些原始值"包装"成临时的对象，以便能够调用方法或添加属性。这一过程涉及到了三个内置的构造函数：Boolean、Number和String，分别对应着三种基本数据类型。

实例演示

让我们从一个简单的例子开始：

javascript 复制代码

var num = 123;
console.log(num.toFixed(2)); // 输出 "123.00"
num.a = 'aaa'
console.log(num.a); // 没有报错

var num = new Number(123);  // 包装类型，可以添加属性 Number对象
console.log(num*2); // 246   当它进行四则运算时，会自动拆箱，转换为原始类型的数值       
num.a = 'aaa';
console.log(num.a); // aaa

在这段代码中，展示了JavaScript中原始值与包装类对象在属性访问和操作上的不同行为，下面我将详细解析这段代码：

原始值与临时包装对象

javascript 复制代码

var num = 123;
console.log(num.toFixed(2)); // 输出 "123.00"

当对原始值num调用.toFixed(2)方法时，JavaScript会自动将其包装成一个临时的Number对象，这个临时对象允许调用.toFixed()这样的方法。因此，num.toFixed(2)能够成功执行并输出字符串"123.00"。调用结束后，这个临时的包装对象会被销毁。

然而，紧接着的代码却展示了可能引起混淆的地方：

javascript 复制代码

num.a = 'aaa';
console.log(num.a); // 没有报错

按照直觉，这段代码似乎应该报错，因为我们尝试给一个原始值添加属性。但这里没有报错的原因在于JavaScript的自动包装机制再次介入。当尝试给num添加属性a时，JavaScript又一次创建了一个临时的Number对象，然后给这个临时对象添加了属性a。但是，由于这个临时对象在表达式执行完毕后立即被销毁，所以实际上并没有在原始值num上持久化任何属性。理论上，第二次访问num.a应该返回undefined，但实际运行中可能因浏览器或JavaScript引擎的优化差异而不报错也不打印任何内容，或者在某些环境下可能因历史遗留原因打印出undefined或报错，这取决于具体的JavaScript引擎实现。

显式创建的包装类对象

javascript 复制代码

var num = new Number(123);  // 包装类型，可以添加属性 Number对象
console.log(num*2); // 246   当它进行四则运算时，会自动拆箱，转换为原始类型的数值       
num.a = 'aaa';
console.log(num.a); // aaa

这里，我们通过new Number(123)显式创建了一个Number对象。这个对象是持久化的，意味着它可以持有属性和方法。因此，当我们给num添加属性a时，这个属性被永久地添加到了num这个包装类对象上，所以console.log(num.a)能够成功输出"aaa"。

值得注意的是，当进行算术运算如num*2时，尽管num是一个包装类对象，JavaScript会自动将其"拆箱"（unboxing），转换为原始值进行运算，以保持运算的一致性和效率。这也就是为什么console.log(num*2)能正确输出246的原因。

包装类的内部机制

经过上面的例子，我们知道当访问原始值的属性或方法时，JavaScript会执行以下步骤：

创建一个临时的包装对象 ：基于原始值的类型，JavaScript会创建一个相应的包装对象（例如，对于数字类型，会创建一个Number对象）。
执行操作：该包装对象会被用来执行所需的操作，比如调用方法或设置属性。
销毁临时对象：一旦操作完成，这个临时的包装对象就会被销毁，防止其占用不必要的内存资源。

字符串类型的包装对象同样的机制也适用于字符串类型：

Javascript 复制代码

var str = "Hello";
// 尝试访问字符串的length属性
console.log(str.length); // 输出 "5"

解析：

创建一个临时的包装对象：当代码尝试访问str.length时，JavaScript识别到str是一个字符串类型的原始值。为了能够调用属性或方法（在这里是访问.length属性），JavaScript会自动创建一个临时的String对象。这个临时对象是对原始字符串值"Hello"的封装，使其能够表现出对象的行为，拥有属性和方法。
执行操作：利用这个临时创建的String对象，JavaScript现在能够执行所请求的操作------访问.length属性。在这个例子中，str.length调用会查询这个临时String对象的长度，并返回结果5，因为字符串"Hello"包含5个字符。
销毁临时对象：一旦str.length表达式的求值完成，且其结果（即数字5）被输出到控制台，JavaScript会意识到临时的String对象不再需要。为了优化内存使用并避免不必要的内存泄漏，这个临时的包装对象会被销毁。这意味着，如果接下来的代码尝试访问或修改这个临时对象上的其他属性或方法（例如，如果尝试访问一个不存在的str.someProperty），这些操作将不会影响到原始的字符串值"Hello"，因为那个临时的包装对象已经不复存在。

这个过程是透明的，开发者通常无需直接关心它的实现细节，但是了解这一点对于深入理解JavaScript的行为至关重要。

陷阱与注意事项

属性丢失问题

由于包装类创建的临时对象会在每次操作后销毁，试图直接给原始值"添加"的属性实际上并不存在于原始值上，而是短暂存在于包装对象上，随后消失。这会导致一些初学者常见的困惑：

javascript 复制代码

var str = "Hello";
str.test = "This is a test";
console.log(str.test); // 输出 undefined

这里，尝试给字符串str添加一个test属性，但因为字符串是原始值，添加的属性实际附加给了字符串对应的包装对象，而这个对象在执行完这行代码后就被销毁了，因此下一行代码查询str.test时找不到任何属性。

深入理解与应用

理解包装类的机制有助于我们更好地处理JavaScript中的原始值与对象之间的转换，尤其是在涉及到类型检查、属性访问或方法调用时。例如，当我们需要对字符串执行一系列复杂操作，并希望保留中间状态时，可以考虑显式创建包装类对象。

类型检测的考量

在进行类型检测时，应注意区分原始值与包装类对象。使用typeof操作符通常能准确判断原始值类型，但对于包装类对象，它只会返回"object"。更精确的类型检测可能需要结合其他技术，如利用instanceof或自定义的类型检查函数。

结语

总结来说，JavaScript中的包装类机制是一种巧妙的设计，旨在让开发者能够以面向对象的方式操作基本数据类型的值（原始值），尽管这些值本身不具备属性和方法。这一机制主要围绕Boolean、Number和String三大基本数据类型的包装类展开，通过自动创建和销毁临时包装对象，使得原始值能够在特定情境下展现出类似对象的行为。

核心要点回顾

包装类目的 ：为了让原始值（如字符串、数字、布尔值）能够临时具备对象特性，以便调用方法或访问属性，如string.length或number.toFixed()。
自动包装：在访问原始值的属性或方法时，JavaScript会自动创建相应的包装对象，执行完操作后立即销毁，以优化内存使用。
显式创建包装对象 ：使用new Boolean()、new Number()、new String()可以显式创建包装对象，这样创建的对象是持久的，可以持有属性和方法。
陷阱与注意事项：由于自动包装产生的临时对象会很快被销毁，直接给原始值添加的属性不会被保留，这可能导致预期之外的行为。
类型检测 ：在进行类型检查时，需留意原始值与包装类对象的区别，使用typeof可能不足以区分所有情况，可能还需要借助instanceof或其他更精确的检测手段。

理解包装类的工作原理，不仅能够帮助开发者避免在处理原始值与对象转换时遇到的常见陷阱，还能够更灵活高效地编写JavaScript代码，特别是在进行类型判断和复杂数据操作时。