Javascript中的包装类型介绍


Posted in Javascript onApril 02, 2015

最近不看犀牛书了,那本翻译的特烂而且好拗口,尤其是原型那块说的乱七八糟,后来经同事介绍,买了本js高级程序设计,然后就继续苦逼的看,不吐槽了,继续说说js中有新鲜感的包装类型。

 一:String

说到String类型,蛮有意思,平时我们都是这样定义一个string类型,如下图:

Javascript中的包装类型介绍

但是在js中有一点非常特别,那就是string类型是属于基本类型,不属于引用类型,那就说明string的值是保存在“栈”上面的,而很多语言不是这样,比如C#,我觉得js不作为引用类型也是情有可原,毕竟它玩不了多线程,而C#中一个线程栈空间只分配1M,如果string在C#中是值类型的话,那就有爆栈的可能,而js却没有栈空间限制,所以也就不存在爆栈的情况了。

那么下一个问题来了,我们经常会对string进行一系列的操作,比如substring。如下图:

Javascript中的包装类型介绍

那刚才也说了,string的值是直接保存在栈上面的,那它怎么会有substring呢?按照官网的解释是这样的:这时候会使用String类型把s包装成引用类型。然后使用String类型的内部实现,正好String内部定义了substring方法,所以其实上面的代码在js的内部应该是这样实现的。

var s=new String("hello")
var r=s.substring(3)
s="hello"

可以看到,其实包装类型只是在执行代码的一瞬间,将s包装成了String引用类型,然后再调用String引用类型下面的substring方法,继而重新将“hello”值赋给s,最后的效果就是s="hello", r="lo",如果你仔细观察,你会发现,如果我给s动态的附一个属性,比如color,那么你再次读取color的话,是不会读取color值的,比如下图:

Javascript中的包装类型介绍

如果你懂了上面我说的原理,那么你对console.log(s.color)等于undefined 就不足以为奇了,我们可以看到,当我使用s.color="red"的时候,js引擎发现有调用属性的写法,会立即在后台动态让其包装成String类型,然后就给String下面新增了一个属性color=red,然后内部立刻会重新设置s的值为“hello”(s="hello"),接下来当你console.log来输出s.color时,js引擎判断又有调用属性的写法,再次new String("hello")了下,自然在这个新的String类型下面是没有color属性的,所以返回undefined了。

刚才我也说了,这种包装操作是js在后台动态追加和删除的,将基本类型转化为了引用类型,那么两者有多大的区别呢?

<1>:这个不用说,一个栈,一个堆,如果你对C#比较了解,可以认为是一个box和unbox的操作。

<2>: 我们知道所有的引用类型都是继承自object,注意是引用类型,不要被面向对象搞混了,比如在C#中,所有的类型都是object子类,在js

 里面却不是这样,我们可以用instanceof看一下。

Javascript中的包装类型介绍

 

二:Boolean

    如果你懂得了String这个包装类,那么其实Boolean包装类跟它是一个原理,只不过在Boolean类型的使用中,是有一个注意事项的,我们知道一个引用类型,除非它是null或者undefined,否则它永远都是true,而这个Boolean类型正是做了这个box操作,如下图:Javascript中的包装类型介绍

我们看到这个时候b已经不是单纯的基本类型了,而是引用类型,这时候就再也“与或”不出我想要的结果了。还有一个Number包装类,这个也没什么注意事项的,就不说了。

 

Javascript 相关文章推荐
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js初始化验证实例详解
Nov 26 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
jQuery日期范围选择器附源码下载
May 23 jQuery
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
javaScript实现游戏倒计时功能
Nov 17 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 #Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 #Javascript
jquery制作多功能轮播图插件
Apr 02 #Javascript
Javascript中3个需要注意的运算符
Apr 02 #Javascript
原生JS实现响应式瀑布流布局
Apr 02 #Javascript
Javascript变量的作用域和作用域链详解
Apr 02 #Javascript
JavaScript中连接操作Oracle数据库实例
Apr 02 #Javascript
You might like
php正则表达式使用的详细介绍
2013/04/27 PHP
php格式化金额函数分享
2015/02/02 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
用Javscript实现表单复选框的全选功能
2007/05/25 Javascript
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
JavaScript 原型链学习总结
2010/10/29 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
vue3.0 的 Composition API 的使用示例
2020/10/26 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python3 反射的四种基本方法解析
2019/08/26 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
DNA基因检测和分析:23andMe
2019/05/01 全球购物
如何估计一张表的大小(假设该表中有1万条数据)
2016/03/27 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
自考毕业自我鉴定范文
2013/10/27 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
乔迁宴答谢词
2014/01/21 职场文书
股东授权委托书范本
2014/09/13 职场文书
音乐会主持人开场白
2015/05/28 职场文书
初中政治教师教学反思
2016/02/23 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL