一次性理清JS装箱与拆箱

前言


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

  1. 那么大写开头的类型和正常小写的类型有什么关系?为什么好像在使用上没有什么区别?
  2. 为什么你可以让普通的数字类型的直接调用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中所有的装箱类型


  1. Number装箱类型:
js 复制代码
var num = 42;  // 数字类型
var numObj = new Number(num);  // 装箱为Number对象

console.log(typeof numObj);  // 输出:object
console.log(numObj.valueOf());  // 输出:42
  1. String装箱类型:
js 复制代码
var str = "Hello";  // 字符串类型
var strObj = new String(str);  // 装箱为String对象

console.log(typeof strObj);  // 输出:object
console.log(strObj.length);  // 输出:5
  1. Boolean装箱类型:
js 复制代码
var bool = true;  // 布尔类型
var boolObj = new Boolean(bool);  // 装箱为Boolean对象

console.log(typeof boolObj);  // 输出:object
console.log(boolObj.valueOf());  // 输出:true
  1. Object装箱类型:
js 复制代码
var obj = { name: "John" };  // 对象类型
var objObj = new Object(obj);  // 装箱为Object对象

console.log(typeof objObj);  // 输出:object
console.log(objObj.hasOwnProperty("name"));  // 输出:true
  1. Symbol装箱类型:
js 复制代码
var sym = Symbol("mySymbol");  // 符号类型
var symObj = Object(sym);  // 装箱为Symbol对象

console.log(typeof symObj);  // 输出:object
console.log(symObj.toString());  // 输出:Symbol(mySymbol)
  1. 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
相关推荐
袁煦丞39 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码1 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟3 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试