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最新动画教程+iso光盘下载
Jan 22 Javascript
Javascript与flash交互通信基础教程
Aug 07 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
javascript 单选框,多选框美化代码
2008/08/01 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
Python-基础-入门 简介
2014/08/09 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python学习小技巧总结
2018/06/10 Python
解决安装tensorflow遇到无法卸载numpy 1.8.0rc1的问题
2018/06/13 Python
python进行TCP端口扫描的实现
2018/12/21 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python使用smtplib模块发送邮件
2020/12/17 Python
大学生优秀班干部事迹材料
2014/05/26 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2015年国庆节新闻稿
2015/07/18 职场文书
升学宴学生致辞
2015/09/29 职场文书
《山中访友》教学反思
2016/02/24 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
Nginx速查手册及常见问题
2022/04/07 Servers