浅析JavaScript中的装箱和拆箱
在javascript中有两种数据类型：
基本类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol
引用类型：对象(Object)、数组(Array)、函数(Function)
在 JavaScript 中，有四个基本的包装类型 String、Number、Boolean、Symbol。
一、装箱操作
所谓的装箱，是指将基本数据类型转换为对应的引用类型的操作。
装箱分隐式装箱和显式装箱两种装箱方式。
1、隐式装箱
先说「隐式装箱」，隐式装箱是由「引擎自动执行」的。
let web = 123;
基本类型是不能添加属性和方法的，添加会报错。
let web = 'Javascript';
web.subText = 'JavaScriptSub';
web.subTextFn = function(){
console.log('JavascriptSubTextFn');
};
console.log(web.subText);//undefined
console.log(web.subTextFn());//Uncaught TypeError: web.subTextFn is not a function
那为什么普通字符串类型可以调用方法呢，比如str.substring()、str.indexOf()等，我们接着往下看：
2、那装箱都做了什么？
在读取值的时候，引擎会创建一个基本类型所对应的「包装类型的对象」，见下图。
对于隐式装箱的执行步骤，我们看下面的代码：
var s1 = 'call_me_R'; // 隐式装箱
var s2 = s1.substring(2);
上面代码的执行步骤其实是这样的：
（1）先创建String类型的一个实例；
（2）在实例中调用制定的方法；
（3）销毁这个实例。
上面的三个步骤转换为代码，如下：
// 1
var s1 = new String('call_me_R');
// 2
var s2 = s1.substring(2);
// 3
s1 = null;
所以，我们在基本类型值上可以使用方法（比如string的substring等），是因为有「隐式装箱」操作。
隐式装箱当读取一个基本类型值时，后台会创建一个该基本类型所对应的基本包装类型对象。在这个基本类型的对象上调用方法，其实就是在这个基本类型对象上调用方法。这个基本包装类型的对象是临时的，它只存在于方法调用那一行代码执行的瞬间，执行方法后立即被销毁。这也是在基本类型上添加属性和方法会不识别或报错的原因了。
3、显式装箱
装箱的另一种方式是显式装箱，这个就比较好理解了，这是通过基本包装类型对象对基本类型进行显式装箱，如下：
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()方法来实现。
引用类型的值转成基本类型的值就是拆箱。拆箱必须要提两个方法 toString() 和 valueOf() ，toString() 返回字符串，valueOf() 返回对象本身。
1、在下面的代码中，留意下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()); // 64 number 基本的数字类型，想要的
console.log(typeof objNum.toString()); // '64' string 基本的字符类型，不想要的
console.log(typeof objStr.valueOf()); // '64' string 基本的数据类型，不想要的
console.log(typeof objStr.toString()); // '64' string 基本的数据类型，想要的
2、更改对象的 toString() 和 valueOf() 两个方法：
//更改对象的 toString() 和 valueOf() 两个方法：
var web = {
'name':'html',
valueOf: () => {
console.log("valueOf");
},
toString: () => {
console.log("toString");
}
}
console.log(String(web))//toString undefined
console.log(Number(web))//valueOf NaN
var ss = {'web': 22}
String(ss)
//"[object Object]"
ss.toString()
//"[object Object]"
ss.valueOf()
//{web: 22}
Number(ss)
//NaN
执行的逻辑是什么？为什么有时候先走 valueOf() ？为什么有时候先执行 toString()？
对象中有 toPrimitive 方法，此方法提供了用于将对象强制转换为基元并替换 toString() 和 valueOf() 方法的通用接口。
运行方法时，判断 PreferredType 的值是哪种类型：
如果是 Number：
（1）如果是基本类型，按原样返回。
（2）否则，输入是一个对象，调用 obj.valueOf() 方法，如果结果是原始的，则将其返回。
（3）否则，调用 obj.toString() 方法，如果结果是原始数据，则将其返回。
（4）否则，抛出 TypeError
如果为 String：那需要交换 2 和3 的执行顺序。
如果没有 PreferredType ，对于 Date 的实例将其设置为 String。
对于所有的其他值，设置为 Number。
参考资料：
https://juejin.cn/post/6844903859765133320
https://mp.weixin.qq.com/s/QDHJBCP9E8GyKPlMOExwAA
