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判断元素是否是隐藏的代码
Apr 24 Javascript
jQuery插件开发全解析
Oct 10 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
jQuery中绑定事件bind() on() live() one()的异同
Feb 23 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
JavaScript常见事件对象与操作实例总结
Jan 05 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 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 模拟POST提交的2种方法详解
2013/06/17 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
js Date概念详细介绍
2013/11/22 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Python易忽视知识点小结
2015/05/25 Python
Python创建模块及模块导入的方法
2015/05/27 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
Python中的单行、多行、中文注释方法
2018/07/19 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
Python之pymysql的使用小结
2019/07/01 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
GWT的应用有哪两种部署模式
2012/12/21 面试题
员工年终自我评价
2014/09/14 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015年暑期实践报告范文
2015/07/13 职场文书
小学三年级数学教学反思
2016/02/16 职场文书