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 相关文章推荐
在Javascript中定义对象类别
Dec 22 Javascript
jQuery 获取对象 基本选择与层级
May 31 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
在Vue中获取自定义属性方法:data-id的实例
Sep 09 Javascript
浅谈TypeScript 索引签名的理解
Oct 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
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
php自动加载代码实例详解
2021/02/26 PHP
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
vue中配置mint-ui报css错误问题的解决方法
2017/10/11 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
js实现拖动缓动效果
2020/01/13 Javascript
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
Python通过format函数格式化显示值
2020/10/17 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
俄罗斯Sportmarket体育在线商店:用于旅游和户外活动
2019/11/12 全球购物
宏碁西班牙官网:Acer西班牙
2021/01/08 全球购物
Python&Matlab实现樱花的绘制
2022/04/07 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
Redis实现分布式锁的五种方法详解
2022/06/14 Redis