【JavaScript】包装类

包装类

JS 提供了三个主要的包装类：String、Number、Boolean。如果尝试把原始类型（string、number、boolean）数据当成对象使用，JS 会自动将其转换为对应包装类的实例。

我们先来看一下 “基本类型数据” 及 “其包装类的实例” 之间的异同：

const strPrimitive = "I am a string";
const strObject = new String("I am a string");

console.log(strPrimitive); // 'I am a string'
console.log(strObject); // { String: 'I am a string' }

① typeof：

typeof strPrimitive; // "string"
typeof strObject; // "object"

② instanceof：

strPrimitive instanceof String; // false
strObject instanceof String; // true

③ Object.prototype.toString.call：

Object.prototype.toString.call(strPrimitive); // [object String]
Object.prototype.toString.call(strObject); // [object String]

④ 调用属性/方法：

strPrimitive.name = "PrimitiveStr";
strObject.name = "ObjectStr";

console.log(strPrimitive.name); // undefined
console.log(strObject.name); // 'ObjectStr'

console.log(strPrimitive); // 'I am a string'
console.log(strObject); // { String: 'I am a string', name: 'ObjectStr' }

console.log(strPrimitive.length); // 13
console.log(strObject.length); // 13

可以看到，strPrimitive.name 输出的是 undefined，而没有报错，这就是因为 JS 会在必要的时候将原始类型数据转换为对应包装类的实例。我们看如下解析：

strPrimitive.name = "PrimitiveStr";
// 执行这一步时, 相当于执行 new String(strPrimitive).name = 'superman'
// 但是没有变量接收 new String(strPrimitive) 这个实例, 所以该实例又会被垃圾回收机制处理掉

console.log(strPrimitive.name);
// 执行这一步时, 相当于执行 console.log(new String(strPrimitive).name)
// 但是这个新建的 String 实例并没有 name 属性, 所以打印 undefined

console.log(strPrimitive.length);
// 执行这一步时, 相当于执行 console.log(new String(strPrimitive).length)
// 这个新建的 String 实例有 length 属性, 所以打印 13

除了使用包装类 Boolean、Number 和 String 创建对应实例。还能使用 Object 创建，它能根据参数的类型返回对应包装类的实例：

const obj = new Object("some text");
console.log(obj instanceof String); // true

如果参数是字符串，则会创建 String 的实例；如果是数值，则会创建 Number 的实例；如果是布尔值，则会得到 Boolean 的实例。

原始类型数据中，undefined、null 没有构造函数，所以它们没有包装类。没有包装类的原始类型数据被当成对象使用会直接报错：

const a = null;
console.log(a.name); // TypeError: Cannot read properties of null

Boolean

创建一个 Boolean 实例：

const booleanObject = new Boolean(true); // 传入 true / false 作为参数

valueOf 方法会被重写，返回布尔值 true / false；toString 也会被重写，返回字符串 “true” / “false”：

console.log(booleanObject.valueOf()); // true
console.log(booleanObject.toString()); // "true"

Boolean 实例在 ECMAScript 中用得很少。不仅如此，它们还很容易引起误会，尤其是在布尔表达式中使用 Boolean 实例时：

const falseObject = new Boolean(false);
const result = falseObject && true;
console.log(result); // true

const falseValue = false;
result = falseValue && true;
console.log(result); // false

在这段代码中，我们创建一个值为 false 的 Boolean 实例。然后，在一个布尔表达式中通过 && 操作将这个实例与一个原始值 true 组合起来。在布尔算术中，false && true 等于 false。可是，这个表达式是对 falseObject 对象而不是对它的值（false）做 && 操作。因为所有对象在布尔表达式中都会自动转换为 true，因此 falseObject 在这个表达式里实际上表示原始值 true 。那么 true && true 当然是 true。

Number

创建一个 Number 实例：

const numberObject = new Number(10); // 传入一个数值作为参数

valueOf、toLocaleString 和 toString 方法会被重写。valueOf 方法返回 Number 实例表示的原始数值，另外两个方法返回数值字符串。

toString 方法可选地接收一个表示基数的参数，并返回对应基数形式的数值字符串：

const num = 10;
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(10)); // "10"
console.log(num.toString(16)); // "a"

String

创建一个 String 实例：

const stringObject = newString("hello world"); // 传入一个字符串作为参数

3 个继承的方法 valueOf、toLocaleString 和 toString 都返回实例表示的原始字符串值。

每个 String 对象都有一个 length 属性，表示字符串中字符的数量。来看下面的例子：

const stringValue = "hello world";
console.log(stringValue.length); // "11"

这个例子输出了字符串 “hello world” 中包含的字符数量：11。注意，即使字符串中包含双字节字符（而不是单字节的 ASCII 字符），也仍然会按单字符来计数。