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 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
jQuery操作之效果详解
May 19 jQuery
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Webpack中loader打包各种文件的方法实例
Sep 03 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
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 APC的安装与使用详解
2013/06/13 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
jquery对象和DOM对象的区别介绍
2013/08/09 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
盘点提高 Python 代码效率的方法
2014/07/03 Python
python字典序问题实例
2014/09/26 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
关于Django ForeignKey 反向查询中filter和_set的效率对比详解
2018/12/15 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
通过Python实现Payload分离免杀过程详解
2020/07/13 Python
Python3中小括号()、中括号[]、花括号{}的区别详解
2020/11/15 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
就业推荐自我鉴定
2013/10/06 职场文书
在职研究生自我鉴定
2013/10/16 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
中专自我鉴定
2014/02/05 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
班主任评语大全
2014/04/26 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
幼儿园春季开学通知
2015/07/16 职场文书
晚会开幕词范文
2016/03/04 职场文书
Golang的继承模拟实例
2021/06/30 Golang
各国货币符号大全
2022/02/17 杂记
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL