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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
使用focus方法让光标默认停留在INPUT框
Jul 29 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
javascript比较两个日期相差天数的方法
Jul 24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
vue裁切预览组件功能的实现步骤
May 04 Javascript
vue+mock.js实现前后端分离
Jul 24 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
vue路由权限校验功能的实现代码
Jun 07 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
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
Look And Say 序列php实现代码
2011/05/22 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JS基于正则表达式的替换操作(replace)用法示例
2017/04/28 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Vue.js 中的 v-show 指令及用法详解
2018/11/19 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
python smtplib发送带附件邮件小程序
2018/05/22 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
python实现键盘控制鼠标移动
2020/11/27 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
阿根廷票务网站:StubHub阿根廷
2018/04/13 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
网络编辑求职信
2014/04/30 职场文书
工作表扬信范文
2015/01/17 职场文书
销售助理岗位职责
2015/02/11 职场文书