浅谈JS包装对象
目录
- 概述
- 定义
- 实例方法
- 原始类型与实例对象的自动转换
- 自定义方法
- Boolean 对象
- 概述
- Boolean 函数的类型转换作用
- Number 对象
- 概述
- 静态属性
- 实例方法
- 自定义方法
- String 对象
- 概述
- 静态方法
概述
定义
对象是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 // false v2 === 'abc' // false v3 === 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() // 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是一个字符串,本身不是对象,不能调用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() // abcabc Number.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'); } // 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包装对象的资料请关注我们其它相关文章!