JavaScript装箱及拆箱boxing及unBoxing用法解析


Posted in Javascript onJune 15, 2020

首先我们来看看这段代码

var s1 = "abc";
var s2 = s1.indexOf("a")

s1 是个 string 啊,怎么会有 indexOf() 方法呢?

这里就涉及到了 JavaScript 中的装箱与拆箱的概念了

装箱:把基本数据类型转化为对应的引用数据类型的操作

在《javascript高级程序设计》中有这样一句话:

每当读取一个基本类型的时候,后台就会创建一个对应的基本包装类型对象,从而让我们能够调用一些方法来操作这些数据。

还是拿最开始的例子

var s1 = "abc";
var s2 = s1.indexOf("a")

变量s1是一个基本类型值,它不是对象,它不应该有方法。但是js内部为我们完成了一系列处理(即装箱),使得它能够调用方法,实现的机制如下:

(1)创建String类型的一个实例;

(2)在实例上调用指定的方法;

(3)销毁这个实例;

下面来看看代码实现:

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;

这样就完成装箱,我们也就能在s1上调用方法了

拆箱:将引用类型对象转换为对应的值类型对象

拆箱:将引用类型对象转换为对应的值类型对象

它是通过引用类型的valueOf()或者toString()方法来实现的。如果是自定义的对象,你也可以自定义它的valueOf()/tostring()方法,实现对这个对象的拆箱。

var objNum = new Number(123); 
 var objStr =new String("123");  
 console.log( typeof objNum ); //object
 console.log( typeof objStr ); //object 
 console.log( typeof objNum.valueOf() ); //number
 console.log( typeof objStr.valueOf() ); //string
 
 console.log( typeof objNum.toString() ); // string 
 console.log( typeof objStr.toString() ); // string

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习5 jQuery事件模型
Feb 07 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
JS实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
使用Bootstrap美化按钮实例代码(demo)
Feb 03 Javascript
js实现三级联动效果(简单易懂)
Mar 27 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
通过实例解析JavaScript for in及for of区别
Jun 15 #Javascript
vue proxy 的优势与使用场景实现
Jun 15 #Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 #Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 #Javascript
为react组件库添加typescript类型提示的方法
Jun 15 #Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 #Javascript
Vue使用Three.js加载glTF模型的方法详解
Jun 14 #Javascript
You might like
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
Laravel框架搜索分页功能示例
2019/02/01 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
vue生命周期实例小结
2018/08/15 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
对Python 语音识别框架详解
2018/12/24 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
pandas 空数据处理方法详解
2019/11/02 Python
使用opencv中匹配点对的坐标提取方式
2020/06/04 Python
职称自我鉴定
2013/10/15 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
学期自我评价
2014/01/27 职场文书
网络技术专业求职信
2014/07/13 职场文书
员工安全生产责任书
2014/07/22 职场文书
2015年教师新年寄语
2014/12/08 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Django显示可视化图表的实践
2021/05/10 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python