JavaScript包装对象使用详解


Posted in Javascript onJuly 09, 2015

JavaScript对象是一种复合值:它是属性和已命名值的集合。通过"."符号来引用属性值。当属性值是一个函数时,称为方法。

①一段你常用但却未必明白其真正底层原理的代码:

var s = "hello world!";
var word = s.substring(s.indexOf(" ")+1,s.length);

如前面所说,这里变量s只是一个字符串原始类型,它怎么会有属性(s.length)和方法(s.indexOf()、s.substring())呢?没错,这正跟我们正要介绍的包装对象有关。原因是:只要引用了字符串s的属性,JavaScript就会将字符串值通过调用new String(s)的方式转换成对象,这个对象继承了字符串(String)对象的方法,并被用来处理属性的引用。一旦属性引用结束,这个新创建的对象就会被销毁。

同字符串一样,数字和布尔值也有各自的方法:通过Number()和Boolean()构造函数创建一个临时对象。存取字符串、数字或布尔值的属性时创建的临时对象就是包装对象。5种原始类型中的剩余两种null和undefined没有包装对象:访问它们的属性会造成一个类型错误(Uncaught TypeError)。明白了上面的代码,那么再看如下代码:

var s = "test";
s.len = 4;//给它设置一个属性
var t = s.len;

不认真的同学这里就会认为最后t就是等于4了。难道最后t不等于4吗?是的,最后t的值是undefined。想知道为什么请看继续看解析:原来以这里第二行代码只是创建了一个临时字符串对象,并给len属性赋值为4,随即销毁这个对象。而第三行又是通过原始字符串s创建一个新字符串对象(这个不是第二行代码创建的对象,第二行代码创建的对象已经被销毁了)并尝试读取其len属相,这个属性自然不存在,因此表达式的结果为undefined。这段代码说明了在读取字符串、数字和布尔值的属性值或方法(实际上是它们对应包装对象的属性值或方法)表现的像对象一样。但如果你试图给属性赋值,则会忽略这个操作:修改只是发生在临时对象身上,而这个临时对象并不会继续保留下来。

注意:可通过String(),Number(),Boolean()构造函数来显示创建包装对象:

var s = "test",n=1,b=true;//一个字符串、数字和布尔值
var S = new String(s);//一个字符串对象
var N = new Number(n);//一个数值对象
var B = new Boolean(b);//一个布尔对象

JavaScript会在必要时将包装对象转换成原始值,因此上段代码中的对象S、N和B常常但不总是表现的和值s、n和b一样。"=="等于运算符将原始值和其包装对象视为相等,但“===”全等运算将它们视为不等。通过typeof运算符也可以看到原始值和其包装对象的不同:

①typeof(s);
->"string"


 typeof(S);
->"object"


②typeof(n);
->"string"


 typeof(N);
->"object"


③typeof(b);
->"string"


 typeof(B);
->"object"

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
js修改input的type属性问题探讨
Oct 12 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
jquery attr方法获取input的checked属性问题
May 26 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
Mar 06 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 #Javascript
jQuery实现tab选项卡效果的方法
Jul 08 #Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 #Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 #Javascript
详细分析JavaScript变量类型
Jul 08 #Javascript
js实现图片点击左右轮播
Jul 08 #Javascript
javascript获取重复次数最多的字符
Jul 08 #Javascript
You might like
PHP实现获取域名的方法小结
2014/11/05 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
js计算页面刷新的次数
2009/07/20 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
python类参数self使用示例
2014/02/17 Python
Python中设置变量访问权限的方法
2015/04/27 Python
windows下python和pip安装教程
2018/05/25 Python
Python使用Flask-SQLAlchemy连接数据库操作示例
2018/08/31 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
CSS实现圆形放大镜狙击镜效果 只有圆圈里的放大
2012/12/10 HTML / CSS
德国综合购物网站:OTTO
2018/11/13 全球购物
九年级历史教学反思
2014/01/27 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
公司年底活动方案
2014/08/17 职场文书
自荐信模板大全
2015/03/27 职场文书
毕业实习单位意见
2015/06/04 职场文书
创业计划书之酒吧
2019/12/02 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
Mysql开启外网访问
2022/05/15 MySQL
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript