原来JS还可以这样拆箱转换详解

前言

在读 Winter 大佬的《重学前端》栏目时，重温了 JS 的「拆箱转换」。「装箱转换」与「拆箱转换」以前都是了解的，今天来看，自己所谓的了解也真是一知半解。在阅读 Winter 老师写的内容后，对「拆箱转换」这个知识点还是不甚清楚，因此我再去深入地了解一番，参考资料详见文末的「参考链接」。

被我们忽略的表象

首先，我们来看一下例子：

const a = { name: 'a', toString () {  console.log(this);  console.log('toString');  return { name: 'toString' }; }, valueOf () {  console.log(this);  console.log('valueOf');  return { name: 'valueOf' }; }};a * 2;// {name: "a", toString: ƒ, valueOf: ƒ}// valueOf// {name: "a", toString: ƒ, valueOf: ƒ}// toString// Uncaught TypeError: Cannot convert object to primitive valuea + "";// {name: "a", toString: ƒ, valueOf: ƒ}// valueOf// {name: "a", toString: ƒ, valueOf: ƒ}// toString// Uncaught TypeError: Cannot convert object to primitive alert(a);// {name: "a", toString: ƒ, valueOf: ƒ}// toString// {name: "a", toString: ƒ, valueOf: ƒ}// valueOf// Uncaught TypeError: Cannot convert object to primitive value

可以看到，toString 和 valueOf 的执行顺序并不固定，而是根据某个条件来决定的，那么是根据什么呢？那就是在拆箱转换时，调用了对象的 ToPrimitive 内部函数时，其会根据执行上下文，自动传入一个转换类型参数，暂时给它命名为 hint。

ToPrimitive

在 JavaScript 标准中，规定了 ToPrimitive 函数，它是对象类型到基本类型转换的实现者（即，拆箱转换）；但这是一个内部算法，是编程语言在内部执行时遵循的一套规则。

对象到 String 和 Number 的转换都遵循“先拆箱再转换”的规则。通过拆箱转换，把对象变成基本类型，再从基本类型转换为对应的 String 或者 Number。

但是对于不同的操作，拆箱转换的内部实现也有所区别，正如上面的例子所示。

「拆箱转换」的调用规则及顺序如下：

来看一下第一种情况：

const b = { [Symbol.toPrimitive] (hint) {  console.log(`hint: ${hint}`);  return {}; }, toString () {  console.log('toString');  return 1; }, valueOf () {  console.log('valueOf');  return 2; }};alert(b); // hint: string b + ''; // hint: defaultb + 500; // hint: default+b; // hint: numberb * 1; // hint: number