一次性理清JS装箱与拆箱

前言

🈶不知道你有没有类似的疑惑，在JS中我们常见的基本数据类型有number null undefined等等，但是你是否又见过这种Number String等等。

那么大写开头的类型和正常小写的类型有什么关系？为什么好像在使用上没有什么区别？
为什么你可以让普通的数字类型的直接调用toString()方法，为什么普通数字可以直接调用方法？

😋如果想弄清楚以上两个问题，就需要先了解以下几个概念装箱(boxing) 拆箱(unboxing) 自动拆箱 临时装箱,当我们了解了以上几个概念之后我们的疑惑就会迎刃而解，那么让我们一起来解决我们的疑惑吧，让知识由点成线，由线成面~

一.基本概念解读

🎡装箱：装箱顾名思义就是把一个东西放进箱子里，我们可以想象成让托尼穿上钢铁战甲，化身钢铁侠能力得到延伸和扩展，其实在JS中装箱就是这样的一个过程。临时装箱：临时装箱指的是当使用基本数据类型调用具体装箱类型的方法的时候JS底层会帮你临时装箱，但是不会改变之前数据的数据类型，装箱需要手动进行，但是系统可以临时帮你装箱。

js 复制代码

let num = 555 
console.log(typeof num.toString()) // 临时装箱

😊拆箱：拆箱就是托尼脱掉战甲的过程，与装箱是一个相反的过程，拆箱主要是为了将装箱的数据转为基本数据类型方便数据的比较和元素。自动拆箱：自动拆箱就是主要指的拆箱过程是自动的不需要我们手动去操作，就像托尼的战甲可以自动解体。

js 复制代码

let num = new Number(42)
let str = new String('Hello World')
let numResult = num + 10  // 进行了自动拆箱
let strResult = str + "JavaScript" // 自动拆箱
console.log(numResult, strResult)

二.JS中所有的装箱类型

Number装箱类型：

js 复制代码

var num = 42;  // 数字类型
var numObj = new Number(num);  // 装箱为Number对象

console.log(typeof numObj);  // 输出：object
console.log(numObj.valueOf());  // 输出：42

String装箱类型：

js 复制代码

var str = "Hello";  // 字符串类型
var strObj = new String(str);  // 装箱为String对象

console.log(typeof strObj);  // 输出：object
console.log(strObj.length);  // 输出：5

Boolean装箱类型：

js 复制代码

var bool = true;  // 布尔类型
var boolObj = new Boolean(bool);  // 装箱为Boolean对象

console.log(typeof boolObj);  // 输出：object
console.log(boolObj.valueOf());  // 输出：true

Object装箱类型：

js 复制代码

var obj = { name: "John" };  // 对象类型
var objObj = new Object(obj);  // 装箱为Object对象

console.log(typeof objObj);  // 输出：object
console.log(objObj.hasOwnProperty("name"));  // 输出：true

Symbol装箱类型：

js 复制代码

var sym = Symbol("mySymbol");  // 符号类型
var symObj = Object(sym);  // 装箱为Symbol对象

console.log(typeof symObj);  // 输出：object
console.log(symObj.toString());  // 输出：Symbol(mySymbol)

Function装箱类型：

js 复制代码

var add = new Function('a', 'b', 'return a + b');  // 使用Function构造函数创建函数对象

console.log(typeof add);  // 输出：function
console.log(add(2, 3));  // 输出：5

需要注意的是，在实际开发中，我们通常更倾向于直接使用基本类型，而不是装箱类型。因为装箱类型会占用更多的内存和资源。装箱类型更适用于需要使用特定类型的方法和属性的情况。

三.手动实现一个装箱类型

js 复制代码

function MyInt (intvalue) {
  this.value = intvalue
}
MyInt.prototype.valueof = function () {
  return this.value
}
MyInt.prototype.tostring = function () {
  return this.value + ''
}

// 使用包装类型
let data = new MyInt(12)
console.log(typeof data.valueof()) // number
console.log(typeof data.tostring()) // string