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的ajax jsonp的使用解惑
Oct 09 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
Oct 17 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
在vue中阻止浏览器后退的实例
Nov 06 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue3不同环境下实现配置代理
May 25 Vue.js
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自动注册登录验证机制实现代码
2011/12/20 PHP
PHP register_shutdown_function()函数的使用示例
2015/06/23 PHP
PHP实现事件机制实例分析
2015/06/26 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
jquery 使用点滴函数代码
2011/05/20 Javascript
JS中如何设置readOnly的值
2013/12/25 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
node.js require() 源码解读
2015/12/13 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
2020/03/06 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
ptyhon实现sitemap生成示例
2014/03/30 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Django中的AutoField字段使用
2020/05/18 Python
利用python 下载bilibili视频
2020/11/13 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
欧洲最大的高尔夫零售商:American Golf
2019/09/02 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
园林技术个人的自我评价
2014/01/08 职场文书
打架检讨书400字
2014/01/17 职场文书
优乐美广告词
2014/03/14 职场文书
诚信贷款承诺书
2014/05/30 职场文书
普通话宣传标语
2014/06/26 职场文书
倡议书格式及范文
2015/04/29 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python