JavaScript 的装箱与拆箱

[liangbus]

##装箱：把基本类型转换为对应的引用类型的操作
##拆箱：与装箱相反，把引用类型转换为基本类型的操作

###装箱
我们都知道 JS 有基本类型（值类型）和引用类型之分
我们可以看看基本类型赋值方式

const n = 101
const s = 'hey hey'

基本类型赋值完其变量就是一个值，但我们都知道，只有对象才拥有方法，而基本类型并非对象
其实这是 JS 在背后有做了一层处理，这个处理的过程，就叫装箱，它使得这些值也拥有了其对应基本类型的原型方法

三个步骤

1. 创建该基本类型的实例
2. 调用该实例上面特定的方法，属性
3. 销毁该实例

const n = 101
const m = new Number(101)
console.log(typeof n) // "number"
console.log(typeof m) // "object"
console.log(n == m) // true, 两个等号会自动触发隐式转换 toValue, toString 方法
console.log(n === m) // false, 三个等号是严格比较，不会触发隐式转换，直接比较其值
console.log(n.constructor === m.constructor) // true, 构造函数是一样的
console.log(n.toString === m.toString) // true
n.laugh = function() { alert('I am laughing') } // 隐式装箱
m.laugh = function() { alert('You are laughing') } // 显式装箱
n.laugh() // Uncaught TypeError: a.laugh is not a function. JS 自己创建的实例会被销毁，所以无法定义属性或者方法在上面
m.laugh() // "You are laughing"  new 出来的对象会一直存在于内存里，直到主执行栈离开当前作用域

###拆箱
拆箱的过程就正好相反，一般是通过对应基本类型的 toString 和 toValue 方法来实现

console.log(n === m.valueOf()) // true
const s = new String('101')
console.log(s.valueOf() === n) // false