JavaScript 包装对象详解：原理、类型与实例方法

概述

定义

在 JavaScript 中，对象是最核心的数据类型。数值、字符串和布尔值这三种原始类型在特定场景下会自动转换为对应的对象，这些对象被称为原始类型的“包装对象”。

包装对象是指与数值、字符串和布尔值分别对应的 Number、String 和 Boolean 三个原生构造函数生成的对象。它们的作用是将原始类型的值封装为对象形式。

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

typeof v1 // "object"
typeof v2 // "object"
typeof v3 // "object"

v1 === 123 // false
v2 === 'abc' // false
v3 === true // false

通过原始类型的值可以生成对应的包装对象实例。例如，变量 v1、v2 和 v3 分别对应数值、字符串和布尔值的包装对象，它们的类型均为 object，且与对应的原始值不相等。

包装对象的设计目的主要有两点：一是让 JavaScript 的所有值都能被视为对象，从而建立统一的数据模型；二是允许原始类型的值调用定义在包装对象上的方法。

Number、String 和 Boolean 这三个原生对象，当不作为构造函数调用（即不使用 new）时，它们作为普通函数使用，主要用于将任意类型的值转换为数值、字符串或布尔值。

// 字符串转为数值
Number('123') // 123

// 数值转为字符串
String(123) // "123"

// 数值转为布尔值
Boolean(123) // true

总结而言，这三个对象在带有 new 关键字时作为构造函数，将原始类型的值转换为对象；在不带 new 时作为普通函数，将任意类型的值转换为对应的原始类型值。

实例方法

三种包装对象提供了丰富的实例方法。其中，valueOf() 和 toString() 是从 Object 对象继承的两种通用方法，下面将分别介绍。

valueOf()

valueOf() 方法用于返回包装对象实例所对应的原始类型的值。

new Number(123).valueOf()  // 123
new String('abc').valueOf() // "abc"
new Boolean(true).valueOf() // true

toString()

toString() 方法用于返回对应值的字符串表示形式。

new Number(123).toString() // "123"
new String('abc').toString() // "abc"
new Boolean(true).toString() // "true"

原始类型与实例对象的自动转换

在某些场景下，原始类型的值会被自动当作包装对象来处理，即调用其属性和方法。此时，JavaScript 引擎会自动将原始值转换为包装对象实例，并在操作完成后立即销毁该实例。

例如，字符串可以调用 length 属性来获取字符串的长度。

'abc'.length // 3

在上述代码中，变量 abc 是一个字符串，本身不具备对象属性。JavaScript 引擎会自动将其转换为包装对象，并在该对象上调用 length 属性。调用结束后，这个临时生成的对象会被销毁，这就是原始类型与实例对象的自动转换机制。

var str = 'abc';
str.length // 3

// 等同于
var strObj = new String(str)
// String {
//   0: "a", 1: "b", 2: "c", length: 3, [[PrimitiveValue]]: "abc"
// }
strObj.length // 3

自动转换生成的包装对象是只读的，因此无法直接为其添加新属性。

var s = 'Hello World';
s.x = 123;
s.x // undefined

尝试为字符串 s 添加一个 x 属性，结果无效，访问该属性始终返回 undefined。

此外，每次调用结束后，包装对象实例都会自动销毁。这意味着，下一次访问字符串属性时，实际上是访问一个新生成的对象，而非上一次生成的对象，因此无法获取之前赋值的属性。若需为字符串添加属性，必须在 String.prototype 原型对象上定义。

自定义方法

除了原生提供的实例方法，包装对象还支持通过原型链自定义方法和属性，使得原始类型的值可以直接调用这些自定义方法。

例如，我们可以定义一个 double 方法，使字符串和数字能够翻倍。

String.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

'abc'.double() // abcabc

Number.prototype.double = function () {
  return this.valueOf() + this.valueOf();
};

(123).double() // 246

上述代码在 String 和 Number 的原型上分别定义了 double 方法，从而允许所有实例调用。需要注意的是，数字 123 必须加上圆括号，否则后面的点运算符会被解释为小数点。

Boolean 对象

概述

Boolean 对象是 JavaScript 的三大包装对象之一。作为构造函数，它主要用于生成布尔值的包装对象实例。

var b = new Boolean(true);
typeof b // "object"
b.valueOf() // true

上述代码中的变量 b 是一个 Boolean 对象的实例，其类型为 object，值为布尔值 true。

需要注意的是，false 对应的包装对象实例在进行布尔运算时结果仍为 true。

if (new Boolean(false)) {
  console.log('true');
} // true

if (new Boolean(false).valueOf()) {
  console.log('true');
} // 无输出

上述第一个例子返回 true，是因为 false 对应的包装对象实例是一个对象，在逻辑运算中会被自动转换为布尔值 true（因为所有对象的布尔值均为 true）。而该实例的 valueOf 方法返回的是原始值 false。

Boolean 函数的类型转换作用

Boolean 对象除了作为构造函数外，还可以单独使用，将任意值转换为布尔值。此时，Boolean 仅作为一个工具方法存在。

Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean('') // false
Boolean(NaN) // false

Boolean(1) // true
Boolean('false') // true
Boolean([]) // true
Boolean({}) // true
Boolean(function () {}) // true
Boolean(/foo/) // true

上述代码中展示了几种返回 true 的情况，值得仔细记忆。

另外，使用双重否运算符（!!）也可以将任意值转换为对应的布尔值。

!!undefined // false
!!null // false
!!0 // false
!!'' // false
!!NaN // false

!!1 // true
!!'false' // true
!![] // true
!!{} // true
!!function(){} // true
!!/foo/ // true

最后，对于某些特殊值，Boolean 函数前是否加 new 会得到完全相反的结果，使用时需格外小心。

if (Boolean(false)) {
  console.log('true');
} // 无输出

if (new Boolean(false)) {
  console.log('true');
} // true

if (Boolean(null)) {
  console.log('true');
} // 无输出

if (new Boolean(null)) {
  console.log('true');
} // true

Number 对象

概述

Number 对象是数值的包装对象，既可作为构造函数使用，也可作为工具函数使用。

作为构造函数时，它用于生成值为数值的对象。

var n = new Number(1);
typeof n // "object"

上述代码中，Number 对象作为构造函数使用，返回一个值为 1 的对象。

作为工具函数时，它可以将任何类型的值转换为数值。

Number(true) // 1

静态属性

Number 对象拥有以下一些静态属性（即直接定义在 Number 对象上的属性，而非实例属性）。

• Number.POSITIVE_INFINITY：正的无限，指向 Infinity。
• Number.NEGATIVE_INFINITY：负的无限，指向 -Infinity。
• Number.NaN：表示非数值，指向 NaN。
• Number.MIN_VALUE：表示最小的正数（即最接近 0 的正数，在 64 位浮点数体系中为 5e-324），相应的，最接近 0 的负数为 -Number.MIN_VALUE。
• Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数，即 9007199254740991。
• Number.MIN_SAFE_INTEGER：表示能够精确表示的最小整数，即 -9007199254740991。

Number.POSITIVE_INFINITY // Infinity
Number.NEGATIVE_INFINITY // -Infinity
Number.NaN // NaN

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MAX_VALUE < Infinity // true

Number.MIN_VALUE // 5e-324
Number.MIN_VALUE > 0 // true

Number.MAX_SAFE_INTEGER // 9007199254740991
Number.MIN_SAFE_INTEGER // -9007199254740991

实例方法

Number 对象有 4 个实例方法，均与将数值转换为指定格式有关。

Number.prototype.toString()

Number 对象部署了自己的 toString 方法，用于将一个数值转换为字符串形式。

(10).toString() // "10"

toString 方法可以接受一个参数，表示输出的进制。如果省略该参数，默认将数值先转为十进制，再输出字符串；否则，根据参数指定的进制，将一个数字转化为对应进制的字符串。

(10).toString(2) // "1010"
(10).toString(8) // "12"
(10).toString(16) // "a"

上述代码中，10 必须放在括号里，以表明后面的点表示调用对象属性。如果不加括号，这个点会被 JavaScript 引擎解释为小数点，从而报错。

10.toString(2)
// SyntaxError: Unexpected token ILLEGAL

只要能让 JavaScript 引擎不混淆小数点和对象的点运算符，各种写法均可使用。除了为 10 加上括号，还可以在 10 后面加两个点，JavaScript 会把第一个点理解成小数点（即 10.0），把第二个点理解成调用对象属性，从而得到正确结果。

10..toString(2) // "1010"

// 其他方法还包括
10 .toString(2) // "1010"
10.0.toString(2) // "1010"

这实际上意味着，可以直接对一个小数使用 toString 方法。

10.5.toString() // "10.5"
10.5.toString(2) // "1010.1"
10.5.toString(8) // "12.4"
10.5.toString(16) // "a.8"

通过方括号运算符也可以调用 toString 方法。

10['toString'](2) // "1010"

toString 方法只能将十进制的数，转为其他进制的字符串。如果要将其他进制的数，转回十进制，需要使用 parseInt 方法。

Number.prototype.toFixed()

toFixed() 方法先将一个数转为指定位数的小数，然后返回这个小数对应的字符串。

(10).toFixed(2) // "10.00"
10.005.toFixed(2) // "10.01"

上述代码中，10 和 10.005 先转成 2 位小数，然后转成字符串。其中 10 必须放在括号里，否则后面的点会被处理成小数点。

toFixed() 方法的参数为小数位数，有效范围为 0 到 20，超出这个范围将抛出 RangeError 错误。

由于浮点数的原因，小数 5 的四舍五入是不确定的，使用的时候必须小心。

(10.055).toFixed(2) // 10.05
(10.005).toFixed(2) // 10.01

Number.prototype.toExponential()

toExponential 方法用于将一个数转为科学计数法形式。

(10).toExponential()  // "1e+1"
(10).toExponential(1) // "1.0e+1"
(10).toExponential(2) // "1.00e+1"

(1234).toExponential()  // "1.234e+3"
(1234).toExponential(1) // "1.2e+3"
(1234).toExponential(2) // "1.23e+3"

toExponential 方法的参数是小数点后有效数字的位数，范围为 0 到 20，超出这个范围，会抛出一个 RangeError 错误。

Number.prototype.toPrecision()

toPrecision 方法用于将一个数转为指定位数的有效数字。

(12.34).toPrecision(1) // "1e+1"
(12.34).toPrecision(2) // "12"
(12.34).toPrecision(3) // "12.3"
(12.34).toPrecision(4) // "12.34"
(12.34).toPrecision(5) // "12.340"

toPrecision 方法的参数为有效数字的位数，范围是 1 到 21，超出这个范围会抛出 RangeError 错误。

toPrecision 方法用于四舍五入时不太可靠，跟浮点数不是精确储存有关。

(12.35).toPrecision(3) // "12.3"
(12.25).toPrecision(3) // "12.3"
(12.15).toPrecision(3) // "12.2"
(12.45).toPrecision(3) // "12.4"

自定义方法

与其他对象一样，Number.prototype 对象上面可以自定义方法，被 Number 的实例继承。

Number.prototype.add = function (x) {
  return this + x;
};

8['add'](2) // 10

上述代码为 Number 对象实例定义了一个 add 方法。在数值上调用某个方法，数值会自动转为 Number 的实例对象，所以就可以调用 add 方法了。由于 add 方法返回的还是数值，所以可以链式运算。

Number.prototype.subtract = function (x) {
  return this - x;
};

(8).add(2).subtract(4) // 6

我们还可以部署更复杂的方法。

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};

(8).iterate() // [0, 1, 2, 3, 4, 5, 6, 7, 8]

上述代码在 Number 对象的原型上部署了 iterate 方法，将一个数值自动遍历为一个数组。

注意，数值的自定义方法，只能定义在它的原型对象 Number.prototype 上面，数值本身是无法自定义属性的。

var n = 1;
n.x = 1;
n.x // undefined

上述代码中，n 是一个原始类型的数值。直接在它上面新增一个属性 x，不会报错，但毫无作用，总是返回 undefined。这是因为一旦被调用属性，n 就自动转为 Number 的实例对象，调用结束后，该对象自动销毁。所以，下一次调用 n 的属性时，实际取到的是另一个对象，属性 x 当然就读不出来。

String 对象

概述

String 对象是 JavaScript 原生提供的三个包装对象之一，用来生成字符串对象。

var s1 = 'abc';
var s2 = new String('abc');

typeof s1 // "string"
typeof s2 // "object"

s2.valueOf() // "abc"

字符串对象是一个类似数组的对象（很像数组，但不是数组）。

new String('abc')
// String {0: "a", 1: "b", 2: "c", length: 3}

(new String('abc'))[1] // "b"

上述代码中，字符串 abc 对应的字符串对象，有数值键（0、1、2）和 length 属性，所以可以像数组那样取值。

除了用作构造函数，String 对象还可以当作工具方法使用，将任意类型的值转为字符串。

String(true) // "true"
String(5) // "5"

静态方法

String.fromCharCode()

String 对象提供的静态方法（即定义在对象本身，而不是定义在对象实例的方法），主要是 String.fromCharCode()。该方法的参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111) // "hello"

上述代码中，String.fromCharCode 方法的参数为空，就返回空字符串；否则，返回参数对应的 Unicode 字符串。

注意，该方法不支持 Unicode 码点大于 0xFFFF 的字符，即传入的参数不能大于 0xFFFF（即十进制的 65535）。

String.fromCharCode(0x20BB7) // "ஷ"
String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)
// true

上述代码中，String.fromCharCode 参数 0x20BB7 大于 0xFFFF，导致返回结果出错。0x20BB7 对应的字符是汉字

以上就是浅谈 JS 包装对象的详细内容，更多关于 JS 包装对象的资料请关注本站其它相关文章！