如何可视化查看JavaScript包装对象？为何console.dir()读不到原始类型的包装对象

差异原因 #

该现象确实是原始类型与函数所属的引用类型本质不同导致的：

• 函数本身是标准引用类型对象，实例持久存储在堆内存中，console.dir()直接读取其内存结构即可输出完整的对象信息。
• 原始类型的值本身不存在任何属性和方法，日常调用原始值方法时，JS引擎会临时创建一个对应类型的包装对象，方法执行完成后这个临时对象会被立即销毁，不会持久存在。直接给console.dir()传入原始值时，API只会输出原始值本身，不会保留临时生成的包装对象，自然无法查看对应的对象结构。

获取原始值包装对象的方法 #

你可以通过对应原始类型的构造函数，手动创建持久化的包装对象实例，示例如下：

// 原始值
const num = 123;
const str = 'hello';
const bool = true;
const sym = Symbol('desc');
const big = 100n;

// 生成对应包装对象
const numWrapper = new Number(num);
const strWrapper = new String(str);
const boolWrapper = new Boolean(bool);
const symWrapper = new Object(sym); // Symbol不支持直接new构造，用Object包裹即可生成包装对象
const bigWrapper = new Object(big); // BigInt同理不支持直接new构造，用Object包裹

// 此时调用console.dir即可查看完整的对象结构
console.dir(strWrapper);

注意事项 #

• 手动创建的包装对象是引用类型，和原始值并不全等，例如new String('a') === 'a'的结果为false，只有使用宽松相等==时会自动拆箱返回true，使用时要注意区分。
• null和undefined没有对应的包装类型，无法生成对应的包装对象。

内容的提问来源于stack exchange，提问作者jurgen_gjoncari