前端每日一练：讲一讲JavaScript的装箱和拆箱、装箱机制

讲一讲JavaScript的装箱和拆箱？

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

看以下代码，s1只是一个基本数据类型，他是怎么能调用indexOf的呢？

const s1 = 'Sunshine_Lin'
const index = s1.indexOf('_')
console.log(index) // 8

原来是JavaScript内部进行了装箱操作

• 1、创建String类型的一个实例；

• 2、在实例上调用指定的方法；

• 3、销毁这个实例；

var temp = new String('Sunshine_Lin')
const index = temp.indexOf('_')
temp = null
console.log(index) // 8

拆箱：将引用数据类型转化为对应的基本数据类型的操作

通过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

问题：JS 装箱机制（auto boxing）​

为什么以下代码第二行输出 true，第三行输出 false？​

const a = 1;​

console.log(a.__proto__ === Number.prototype); // 输出 true​

console.log(a instanceof Number); // 输出 false​

​

首先，基础类型是没有 __proto__ 的，第二行之所以会输出 true，是因为触发了 js 的 autoboxing 机制，也叫装箱机制，当一个基础类型尝试访问 __propt__ 时，js 会把基础类型临时装箱，理解为 const a = new Number(1)，所以第二行会输出 true，而第三行没有触发装箱机制，因此输出 false。