为了账号安全,请及时绑定邮箱和手机立即绑定

js包装对象简单分析及示例

标签:
JavaScript
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

点击查看更多内容
2人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消