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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
js数组的基本操作(很全自己整理的)
Oct 16 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
如何编写一个完整的Angular4 FormText 组件
Nov 18 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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 GD绘制24小时柱状图
2008/06/28 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jquery如何通过name名称获取当前name的value值
2013/12/20 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频4K
2018/12/05 DOTA
[01:32]寻找你心中的那团火 DOTA2 TI9火焰传递活动今日开启
2019/05/16 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python中的异常处理try/except/finally/raise用法分析
2019/02/28 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
德国户外商店:eXXpozed
2020/07/25 全球购物
数据管理员的自我评价分享
2013/11/15 职场文书
大学生个人自荐信
2014/02/24 职场文书
法人委托书范本
2014/04/04 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
Python实现拼音转换
2021/06/07 Python