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 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
angularJS中router的使用指南
Feb 09 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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编码规范-php coding standard
2007/03/16 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
Valerio 发布了 Mootools
2006/09/23 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
2015/08/24 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
jquery中$.fn和图片滚动效果实现的必备知识总结
2017/04/21 jQuery
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
JavaScript定时器设置、使用与倒计时案例详解
2019/07/08 Javascript
JavaScript JSON数据处理全集(小结)
2019/08/15 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
vuecli项目构建SSR服务端渲染的实现
2020/10/30 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python统计单词出现的次数
2018/04/04 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
python中rc1什么意思
2020/06/19 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python 实现3种回归模型(Linear Regression,Lasso,Ridge)的示例
2020/10/15 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
职工运动会邀请函
2014/01/19 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
Python 数据可视化之Matplotlib详解
2021/11/02 Python