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 浮动广告实现代码
Dec 25 Javascript
js parseInt("08")未指定进位制问题
Jun 19 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
vue模板语法-插值详解
Mar 06 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
vue设计一个倒计时秒杀的组件详解
Apr 06 Javascript
js实现无缝轮播图
Mar 09 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
2019/10/15 PHP
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
通过jquery实现页面的动画效果(实例代码)
2016/09/18 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
2016/10/11 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python脚本实现12306火车票查询系统
2016/09/30 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Python读写操作csv和excle文件代码实例
2020/03/16 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
python excel多行合并的方法
2020/12/09 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
水利学院求职自荐书
2014/02/01 职场文书
面试必备的求职信
2014/05/25 职场文书
新闻发布会策划方案
2014/06/12 职场文书
社区创先争优承诺书
2014/08/30 职场文书
初级党校心得体会
2014/09/11 职场文书
社区元宵节活动总结
2015/02/06 职场文书
倡议书格式及范文
2015/04/29 职场文书
2015年中秋寄语
2015/07/31 职场文书
学习雷锋主题班会
2015/08/14 职场文书