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,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 Javascript
JavaScript this使用方法图解
Feb 04 Javascript
详解Vue中的watch和computed
Nov 09 Javascript
用JS实现飞机大战小游戏
Jun 09 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数字格式化
2006/12/06 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
在javascript中,null>=0 为真,null==0却为假,null的值详解
2017/02/22 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
Vue 打包体积优化方案小结
2020/05/20 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
python进阶教程之模块(module)介绍
2014/08/30 Python
Python max内置函数详细介绍
2016/11/17 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
用pycharm开发django项目示例代码
2019/06/13 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Python使用Chrome插件实现爬虫过程图解
2020/06/09 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
意大利在线购买隐形眼镜网站:VisionDirect.it
2019/03/18 全球购物
写出程序把一个链表中的接点顺序倒排
2014/04/28 面试题
创业计划书如何吸引他人眼球
2014/01/10 职场文书
幼儿园安全责任书
2014/04/14 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
党员剖析材料范文
2014/09/30 职场文书
工作收入证明模板
2014/10/10 职场文书
承诺书的内容有哪些,怎么写?
2019/06/21 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android