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学习笔记(十四) window对象使用介绍
Jun 20 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
JS 去前后空格大全(IE9亲测)
Jul 15 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
javascript将数字转换整数金额大写的方法
Jan 27 Javascript
jQuery实现类似淘宝网图片放大效果的方法
Jul 08 Javascript
jQuery实现自定义右键菜单的树状菜单效果
Sep 02 Javascript
jquery中键盘事件小结
Feb 24 Javascript
JavaScript事件处理的方式(三种)
Apr 26 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
比file_get_contents稳定的curl_get_contents分享
2012/01/11 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
原生JS实现天气预报
2020/06/16 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python实现求解一元二次方程的方法示例
2018/06/20 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
使用Python将Mysql的查询数据导出到文件的方法
2019/02/25 Python
基于django传递数据到后端的例子
2019/08/16 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
写给老师的表扬信
2014/01/21 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android