likes
comments
collection
share

揭开JavaScript包装类的奥秘在JavaScript中，原始值（如数字、字符串、布尔值）本身不能具有属性和方法，但

作者站长头像
站长
· 阅读数 14

在JavaScript中，原始值（如数字、字符串、布尔值）本身不能具有属性和方法，但通过包装类（Wrapper Object），我们可以临时性地为这些原始值附加属性和方法。本文将深入探讨包装类的概念、作用以及如何在实际开发中利用它们。

对象的基本概念

在JavaScript中，对象是一种复合数据类型，它由键值对（key-value pairs）组成。对象的键（key）只能是字符串类型，而值（value）可以是任何类型的数据，包括其他对象、函数和原始值。

对象的创建方式

JavaScript提供了多种方式来创建对象，常见的有以下几种：

  1. 对象字面量：这是创建对象最常见和最简洁的方式。

    const person = {
    name: "Alice",
    age: 23
};

    对象字面量是一种非常直观的方式，可以直接定义键值对，代码简洁易读。

  2. new Object()：这是使用内置的Object构造函数创建对象的方式。

    const person = new Object();
person.name = "Alice";
person.age = 23;

    虽然这种方式在功能上与对象字面量相同，但代码稍显冗长，一般在特定需要时使用。

  3. 构造函数：通过自定义构造函数来创建对象，可以实现更复杂的对象初始化逻辑。

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

const alice = new Person("Alice", 23);

    使用构造函数可以创建具有相同属性和方法的对象，适用于需要创建多个类似对象的场景。

什么是包装类

包装类是指将原始值（如number、string、boolean）封装成对象，以便我们可以像操作对象一样操作这些原始值。当我们试图访问一个原始值的属性或调用其方法时，JavaScript引擎会在后台自动将其转换为包装对象。这一过程被称为自动装箱（autoboxing）。

原始值与对象

首先，让我们明确原始值和对象的区别：

  • 原始值：包括number、string、boolean、undefined、null、symbol和bigint。这些值是不可变的，也就是说，它们本身不具有属性和方法。
  • 对象：对象是属性的集合，可以存储各种类型的值，并且可以具有方法。

创建包装类

JavaScript提供了三个主要的包装类：Number、String和Boolean。通过这些构造函数，我们可以将原始值转换为相应的对象。

let num = new Number(42);
let str = new String("Hello");
let bool = new Boolean(true);

console.log(typeof num); // 输出：object
console.log(typeof str); // 输出：object
console.log(typeof bool); // 输出：object

在上述代码中，我们使用Number、String和Boolean构造函数将原始值转换为对象。这些对象具有与原始值相同的值，但还可以拥有属性和方法。

包装类的自动装箱与拆箱

当我们试图访问一个原始值的属性或方法时，JavaScript会自动将其装箱为相应的包装对象，以便我们可以像操作对象一样操作它们。

let num = 42;
console.log(num.toString()); // 输出："42"

在这段代码中，尽管num是一个原始的number类型，但我们仍然可以调用toString方法。这是因为JavaScript在后台将num自动装箱为一个Number对象，然后调用该对象的toString方法。

自动装箱的实现

自动装箱的实现依赖于包装类的构造函数。当我们访问原始值的属性或方法时，JavaScript会自动创建一个对应的包装对象，并在该对象上执行相应的操作。

let str = "Hello";
console.log(str.length); // 输出：5
console.log(str.toUpperCase()); // 输出："HELLO"

在这段代码中，str是一个原始的string类型。当我们访问str.length或调用str.toUpperCase时，JavaScript会将str自动装箱为一个String对象，然后返回该对象的属性或调用其方法。

自动拆箱

当包装对象不再需要时，JavaScript会自动将其拆箱为原始值。这一过程称为自动拆箱。自动拆箱通常发生在对包装对象进行比较或运算时。

let num = new Number(42);
console.log(num == 42); // 输出：true
console.log(num + 1); // 输出：43

在这段代码中，num是一个Number对象。当我们将其与一个原始的number进行比较或运算时，JavaScript会自动将num拆箱为原始值42，然后执行相应的操作。

包装类的限制与注意事项

尽管包装类为我们提供了在原始值上操作属性和方法的便利，但它们也有一些限制和需要注意的事项。

包装类实例与原始值的比较

由于包装类是对象，而原始值是不可变的基本数据类型，所以它们之间的比较需要特别注意。

let num = new Number(42);
let num2 = 42;

console.log(num === num2); // 输出：false
console.log(num == num2); // 输出：true

在这段代码中，num是一个Number对象，而num2是一个原始的number类型。使用===进行严格比较时，它们不会相等，因为类型不同。但使用==进行非严格比较时，JavaScript会自动将num拆箱为原始值，然后进行比较。

不要滥用包装类

由于包装类是对象，创建它们需要分配内存和处理更多的性能开销。因此，除非有明确的需要，否则应尽量避免显式创建包装类实例。自动装箱已经能在大多数情况下满足需求。

let str = "Hello";
console.log(str.toUpperCase()); // 自动装箱，无需显式创建String对象

上述代码展示了自动装箱的便利性。大多数情况下，我们只需要依赖自动装箱机制，而不需要显式创建包装类对象。

包装类与V8引擎

在V8引擎中，当执行到包装类时，会通过valueOf方法试探该包装类是否是原始值。如果是，则遵循原始值不能具有属性和方法的规则，再移除掉给包装类添加的属性。

let num = new Number(42);
num.customProperty = "I'm a custom property";
console.log(num.customProperty); // 输出：I'm a custom property

let primitiveNum = 42;
primitiveNum.customProperty = "I'm a custom property";
console.log(primitiveNum.customProperty); // 输出：undefined

在上述代码中，num是一个Number对象，因此可以添加自定义属性。但对于primitiveNum（原始的number类型），尽管我们可以尝试添加属性，但由于原始值不能具有属性，V8引擎会自动移除该属性。

结语

包装类在JavaScript中为我们提供了一种便利的机制，使得我们可以在原始值上操作属性和方法。我们需要理解其中包装类的工作原理、自动装箱与拆箱的过程，以及在何种情况下适合使用包装类。

转载自:https://juejin.cn/post/7414157132972982308
评论
请登录