浅谈JS包装对象

概述定义

对象是JavaScript语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”（wrapper）。

所谓“包装对象”，指的是与数值、字符串、布尔值分别相对应的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 // falsev2 === ’abc’ // falsev3 === true // false

上面代码中，基于原始类型的值，生成了三个对应的包装对象。可以看到，v1、v2、v3都是对象，且与对应的简单类型值不相等。

包装对象的设计目的，首先是使得“对象”这种类型可以覆盖JavaScript所有的值，整门语言有一个通用的数据模型，其次是使得原始类型的值也有办法调用自己的方法。

Number、String和Boolean这三个原生对象，如果不作为构造函数调用（即调用时不加new），而是作为普通函数调用，常常用于将任意类型的值转为数值、字符串和布尔值。

// 字符串转为数值Number(’123’) // 123// 数值转为字符串String(123) // '123'// 数值转为布尔值Boolean(123) // true

总结一下，这三个对象作为构造函数使用（带有new）时，可以将原始类型的值转为对象；作为普通函数使用时（不带有new），可以将任意类型的值，转为原始类型的值。

实例方法

三种包装对象各自提供了许多实例方法。这里介绍两种它们共同具有、从Object对象继承的方法：valueOf()和toString()。

valueOf()

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

new Number(123).valueOf() // 123new 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是一个字符串，本身不是对象，不能调用length属性。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() // abcabcNumber.prototype.double = function () { return this.valueOf() + this.valueOf();};(123).double() // 246

上面代码在String和Number这两个对象的原型上面，分别自定义了一个方法，从而可以在所有实例对象上调用。注意，最后的123外面必须要加上圆括号，否则后面的点运算符（.）会被解释成小数点。

Boolean 对象概述

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

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

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

注意，false对应的包装对象实例，布尔运算结果也是true。

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

上面代码的第一个例子之所以得到true，是因为false对应的包装对象实例是一个对象，进行逻辑运算时，被自动转化成布尔值true（因为所有对象对应的布尔值都是true）。而实例的valueOf方法，则返回实例对应的原始值，本例为false。

Boolean 函数的类型转换作用

Boolean对象除了可以作为构造函数，还可以单独使用，将任意值转为布尔值。这时Boolean就是一个单纯的工具方法。

Boolean(undefined) // falseBoolean(null) // falseBoolean(0) // falseBoolean(’’) // falseBoolean(NaN) // falseBoolean(1) // trueBoolean(’false’) // trueBoolean([]) // trueBoolean({}) // trueBoolean(function () {}) // trueBoolean(/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’);} // trueif (Boolean(null)) { console.log(’true’);} // 无输出if (new Boolean(null)) { console.log(’true’);} // trueNumber 对象概述

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 // InfinityNumber.NEGATIVE_INFINITY // -InfinityNumber.NaN // NaNNumber.MAX_VALUE // 1.7976931348623157e+308Number.MAX_VALUE < Infinity // trueNumber.MIN_VALUE // 5e-324Number.MIN_VALUE > 0 // trueNumber.MAX_SAFE_INTEGER // 9007199254740991Number.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包装对象的资料请关注好吧啦网其它相关文章！