谈谈JavaScript中装箱和拆箱

简介: 在JavaScript里面有个引用类型叫做基本包装类型,它包括String、Number和Boolean。那么它和基本的类型String、Number和Boolean是啥关系呢?接着往下看👀

image.png


JavaScript里面有个引用类型叫做基本包装类型,它包括String、Number和Boolean。那么它和基本的类型String、Number和Boolean是啥关系呢?接着往下看👀


装箱操作


所谓的装箱,是指将基本数据类型转换为对应的引用类型的操作。而装箱又分为隐式装箱和显式装箱


隐式装箱


对于隐式装箱,我们看下下面的代码:


var s1 = 'call_me_R'; // 隐式装箱
var s2 = s1.substring(2);


上面代码的执行步骤其实是这样的:


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


  1. 在实例中调用制定的方法


  1. 销毁这个实例。


上面的三个步骤转换为代码,如下:


# 1
var s1 = new String('call_me_R');
# 2
var s2 = s1.substring(2);
# 3
s1 = null;


隐式装箱当读取一个基本类型值时,后台会创建一个该基本类型所对应的基本包装类型对象。在这个基本类型的对象上调用方法,其实就是在这个基本类型对象上调用方法。这个基本类型的对象是临时的,它只存在于方法调用那一行代码执行的瞬间,执行方法后立即被销毁。这也是在基本类型上添加属性和方法会不识别或报错的原因了,如下:


var s1 = 'call_me_R';
s1.job = 'frontend engineer';
s1.sayHello = function(){
  console.log('hello kitty');
}
console.log(s1.job); // undefined
s1.sayHello(); // Uncaught TypeError: s1.sayHello is not a function


显示装箱


装箱的另一种方式是显示装箱,这个就比较好理解了,这是通过基本包装类型对象对基本类型进行显示装箱,如下:


var name = new String('call_me_R');


显示装箱的操纵可以对new出来的对象进行属性和方法的添加啦,因为通过通过new操作符创建的引用类型的实例,在执行流离开当前作用域之前一直保留在内存中


var objStr = new String('call_me_R');
objStr.job = 'frontend engineer';
objStr.sayHi = function(){
  console.log('hello kitty');
}
console.log(objStr.job); // frontend engineer
objStr.sayHi(); // hello kitty


拆箱操作


拆箱就和装箱相反了。拆箱是指把引用类型转换成基本的数据类型。通常通过引用类型的valueOf()和toString()方法来实现。


在下面的代码中,留意下valueOf()和toString()返回值的区别:


var objNum = new Number(64);
var objStr = new String('64');
console.log(typeof objNum); // object
console.log(typeof objStr); // object
# 拆箱
console.log(typeof objNum.valueOf()); // number 基本的数字类型,想要的
console.log(typeof objNum.toString()); // string 基本的字符类型,不想要的
console.log(typeof objStr.valueOf()); // string 基本的数据类型,不想要的
console.log(typeof objStr.toString()); // string 基本的数据类型,想要的


所以,在进行拆箱操作的过程中,还得结合下实际的情况进行拆箱,别盲目来 -- 吃力不讨好就很尴尬了😅



相关文章
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的云端学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的云端学习系统附带文章和源代码部署视频讲解等
15 4
|
1天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的诗词学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的诗词学习系统附带文章和源代码部署视频讲解等
5 0
|
1天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的中医学习服务管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的中医学习服务管理系统附带文章和源代码部署视频讲解等
7 0
|
1天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线学习过程管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线学习过程管理系统附带文章和源代码部署视频讲解等
7 0
|
1天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的大学生国学自主学习平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的大学生国学自主学习平台附带文章和源代码部署视频讲解等
6 0
|
2天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的精品课程在线学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的精品课程在线学习系统附带文章和源代码部署视频讲解等
19 8
|
2天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的学习视频资源库的系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的学习视频资源库的系统附带文章和源代码部署视频讲解等
15 0
|
2天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的中文学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的中文学习系统附带文章和源代码部署视频讲解等
8 0
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线学习系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线学习系统附带文章和源代码部署视频讲解等
156 10
|
3天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的计算机科学与技术学习网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的计算机科学与技术学习网站附带文章和源代码部署视频讲解等
12 0