JavaScript的装箱和拆箱

在金山办公的前端卷子里遇到了这个问答,感觉触到了知识盲区,此前却是没有了解过JavaScript的装箱和拆箱,专门写个笔记记录一下。

Keyword: JavaScript,装箱/拆箱

概念

对于这个问题,首先要理解什么是装箱,什么是拆箱。

装箱可以理解成把数据装到一个箱子里包装起来,把它包装成基本对象,比如字符串会被包装成String,我们能够调用属于String的方法操作对象。

需要注意的是,基本类型的变量是没有方法的,只有Object才有方法,才可以调用方法,所以对基本对象调用方法都需要装箱,才能够调用对应的方法。

而拆箱就是装箱的反向操作,指的是把基本对象转化成基本类型,从对象变成一个纯粹的值。

装箱

装箱分成显式和隐式,二者在实际的编程中都很常见。

显式装箱

显式装箱很好理解,就是我们主动写一个赋值表达式对基本类型的变量进行包装,把它包装成基本对象,从而可以进一步调用它的方法。

举例:

1
2
3
var number = new Number(1);
var string = new String('s');
var bool = new Boolean(true);

上述都是显式装箱操作,运行的结果如下:

隐式装箱

隐式装箱也不难理解,指的是这个装箱操作不是我们主动用表达式做的,而是自动做的。

这是什么意思呢?其实在JavaScript里面,基础类型可以直接调用它对应基本对象的各个方法,在调用方法的时候实际上背后是先进行了装箱操作,再调用方法。

举个例子:

1
2
var num = 123;
num.toString(2);

执行这两行代码的时候,实际上就已经进行了隐式装箱。这个装箱会在调用方法的时候进行,在方法调用结束后销毁装箱后得到的临时对象。

拆箱

拆箱也很常见,但是在代码中拆箱比装箱难理解。我们要把值从基本对象里取出来,那么我们需要调用基本对象的方法取出里面的值。

举个例子:

1
2
3
4
var num = new Number(123);
console.log(typeof num);
var _num = num.valueOf();
console.log(typeof _num);

这几行就是先显式装箱然后再拆箱,拆箱取出来的东西是基本类型,如下图所示:

小结

拆箱、装箱属于是基本概念,这个概念在工程中比较难遇到,不特别了解一下确实是不知道有这么一个概念的存在。

两个概念不难理解,结合例子看还是很快就能懂的。