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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
js 利用className得到对象的实现代码
Nov 15 Javascript
Bootstrap每天必学之表单
Nov 23 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
Feb 13 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
JavaScript实现动态留言板
Mar 16 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
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
Bootstrap零基础入门教程(三)
2016/07/18 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
2017/02/18 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Html5之自定义属性(data-,dataset)
2019/11/19 HTML / CSS
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
几道PHP的面试题
2012/05/19 面试题
北京某公司的.net笔试题
2014/03/20 面试题
室内设计实习自我鉴定
2013/09/25 职场文书
应届生服务员求职信
2013/10/31 职场文书
中学运动会广播稿
2014/01/19 职场文书
小加工厂管理制度
2014/01/21 职场文书
教师节促销方案
2014/03/22 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
电影开国大典观后感
2015/06/04 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS