前言

在讀 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