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 相关文章推荐
js获取html页面节点方法(递归方式)
Dec 13 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
微信小程序如何调用新闻接口实现列表循环
Jul 02 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
jQuery实现回到顶部效果
Oct 19 jQuery
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
mysql时区问题
2008/03/26 PHP
php 归并排序 数组交集
2011/05/10 PHP
PHP也能干大事之PHP中的编码解码详解
2015/04/20 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
浅谈js数据类型判断与数组判断
2016/08/29 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
2018/04/17 Javascript
Vue.js的动态组件模板的实现
2018/11/26 Javascript
微信小程序之swiper滑动面板用法示例
2018/12/04 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
2020/07/17 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
深入浅析python继承问题
2016/05/29 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
一套Delphi的笔试题二
2013/05/11 面试题
物理教育专业毕业生推荐信
2013/11/03 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
工商管理专业自荐信
2014/06/03 职场文书
服务理念口号
2014/06/11 职场文书
2014年村委会工作总结
2014/11/24 职场文书
幼师中班个人总结
2015/02/12 职场文书
二婚主持词
2015/06/30 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
muduo TcpServer模块源码分析
2022/04/26 Redis