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_ibm
May 16 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
Javascript中replace()小结
Sep 30 Javascript
jquery实现定时自动轮播特效
Dec 10 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
jQuery树插件zTree使用方法详解
May 02 jQuery
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
Sep 25 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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基于面向对象实现的留言本功能实例
2018/04/04 PHP
Laravel学习笔记之Artisan命令生成自定义模板的方法
2018/11/22 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
[JS源码]超长文章自动分页(客户端版)
2007/01/09 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JS绘制生成花瓣效果的方法
2015/08/05 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
详解redux异步操作实践
2018/08/15 Javascript
JavaScript设计模式之责任链模式实例分析
2019/01/16 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python求出0~100以内的所有素数
2018/01/23 Python
详解python中的json和字典dict
2018/06/22 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
Python多图片合并PDF的方法
2019/01/03 Python
python英语单词测试小程序代码实例
2019/09/09 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Django models文件模型变更错误解决
2020/05/11 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
出国留学介绍信
2014/01/13 职场文书
护士在校生自荐信
2014/02/01 职场文书
个人现实表现材料
2014/02/04 职场文书
综合实践活动总结
2014/05/05 职场文书
政协调研汇报材料
2014/08/15 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
Django drf请求模块源码解析
2021/06/08 Python
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers