前端JS的包装对象解析

海南前端开发项目 web前端实战小项目开发 南宁web前端开发项目

开头,先给大家一道题,测试下:
javascript 代码

var test = ‘test’
test.a = ‘hello’
console.log(test.a)

我会告诉你答案是”hello”……
你不会真的相信了吧!天真的骚年呀,实践出真知,自己去浏览器试下吧。
真正的答案,是undefined。
为什么?别急,且听我慢慢道来,下面隆重介绍我们文章的主角的包装对象。

定义:
在JavaScript中,“一切皆对象”,数组和函数本质上都是对象,就连三种原始类型的值——数值、字符串、布尔值——在一定条件下,也会自动转为对象,也就是原始类型的“包装对象”。
通俗来讲:
字符串,数值,字符串,这些单身狗看其它人都有对象,非常不爽,所以自己也搞了个对象,名字叫包装。

一般来说,只有对象是可以对属性进行读写操作的。但是聪明的骚年,你有没有发现,平时我们用得很多的字符串方法和属性,都是直接通过”.”操作符访问的。比如:
javascript 代码

console.log(‘hello world’.length)
console.log(‘this a string’.indexOf(‘a’))

其实,在我们调用这些方法和属性时,js内部已经隐式地帮我们帮创建了一个包装对象了,以上的实际的情形应该是这样的:
javascript 代码

console.log(new String(‘hello world’).length)
console.log(new String(‘this a string’).indexOf(‘a’))

但是两者还是有区别的,
区别1:
浏览器自己隐式创建的包装对象和你显式创建的包装对象不严格相等。简单来说,虽然说表面js对亲生的与领养的一样,但实际上,亲生的不等于领养的。
javascript 代码

var a1 = ‘test’,
    a2 = new String(‘test’)
console.log(a1 == a2) //true
console.log(a1 === a2) //false

区别2:
隐式创建的包装对象,在使用完后之后就会被抛弃了。简单来说就是,一个大大的负心汉,上完我,就抛弃,还重新去找其他对象。
拿我们开头的那道题来说:
test.a = “hello”;
这里隐式创建了一个包装对象,所以这里赋值不会报错。
console.log(test.a);
这里之前的包装对象已经被抛弃了,但是使用了”.”运算符,所以又创建一个新的包装对象,但是这个对象的属性a并没有赋值,所以属性a的值是undefined。

说到实际运用中,有的浏览器性能不是很好,比如说低版本IE,当频繁处理字符串时,效率会很低。所以很多时候,我们还不如直接显式地创建包装对象,防止浏览器过多地创建隐式的包装对象,提升性能。
javascript 代码

//不推荐使用种方法
var example = “this is a example”;
//推荐使用这种方法,提升性能。
var example2 = new String(“this is a example”);
web前端开发开源项目 前端开发项目 前端项目与后台开发过程
» 本文来自:前端开发者 » 《前端JS的包装对象解析》
» 本文链接地址:https://www.rokub.com/5469.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!