js包装对象简单分析及示例
JavaScript语言“一切皆对象”,数组和函数本质上都是对象,就连三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”。
- 包装对象”,JS中共有三种:即数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成(包装成)对象。
var v1 = new Number(12); var v2 = new String('abc); var v3 = new Boolean(false);
- 上面代码根据原始类型的值,生成了三个对象,与原始值的类型不同。这用typeof运算符就可以看出来。
typeof v1 // "object" typeof v2 // "object" typeof v3 // "object"
v1 === 123 // false
v2 === 'abc' // false
v3 === true // false
> 奇怪吗,为什么会这样呢?追溯到JS语言所设计此特点的目的,就是实现JS的’一切皆对象‘的夙愿,并且使得原始类型的值可以方便地调用特定方法。
* 另外Number,Boolean,String如果不加new关键字作为构造函数调用,可用于将任意类型的值转换为数值,布尔值,字符串。
Number(123) // 123
String('abc') // "abc"
Boolean(true) // true
> 可见:当上述三个对象充当构造函数时,可以将原始类型的值转换为对象;当充当普通函数时,可以将任意类型的值,转换为原始类型的值。
### 包装对象实例的方法
* 包装对象即对象,因此继承Object对象提供的原生方法,主要有valueOf方法和toString方法。
- valueOf() :返回包装对象实例对应的原始类型的值----即还原原始类型。
new Number(123).valueOf() // 123
new String("abc").valueOf() // "abc"
new Boolean("true").valueOf() // true
- toString()方法: 返回实例对于的字符串---即字符串化实例。
new Number(1234).toString() // "1234"
new String("abc").toString() // "abc"
new Boolean("true").toString() // "true"
- 原始类型的自动转换
> 原始类型的值可以自动作为对象调用,即调用对象属性和方法。但要注意,JS引擎会自动将原始类型的值转为包装对象,使用后立即销毁。
'abcde'.length// 5
//字符串本身不是对于,无length属性。JS引擎自动将其包装为对象,在其调用length属性,结束后立即销毁。
var str = 'abc';
str.length // 3
var strObj = new String(str);
strObj.length=3;
> 'abc'的包装对象有每个位置的值,有length属性,还有一个property---[[PrimitiveValue]]保存字符串原始值。此内部属性外部无法调用,仅供valueOf或者toString这样的内部方法调用。
* 此临时对象是只读的无法改写,这也是字符串无法添加新属性的根本原因。
var s = 'Hello World';
s.x = 123;
s.x // undefined,调用结束后,临时对象随即销毁,即下次调用字符串属性时,实际是调用一个新生对象,而非上次调用所生产的那个,故取不到其上属性。如非要添加属性,可以再起原型对象String.prototype上定义。
- 自定义方法
三种包装对象还可以在原型上添加自定义属性和方法,供原始类型的值直接调用。
String.prototype.double = function () {
return this.valueOf() + this.valueOf();
};
'abc'.double()
// abcabc
Number.prototype.double = function () {
return this.valueOf() + this.valueOf();
};
(123).double()
// 246
* 对于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
共同学习,写下你的评论
评论加载中...
作者其他优质文章