一道面試題引發的對 javascript 型別轉換的思考

最近群裡有人發了下面這題：
實現一個函式，運算結果可以滿足如下預期結果：

對於一個好奇的切圖仔來說，忍不住動手嘗試了一下，看到題目首先想到的是會用到高階函式以及 Array.prototype.reduce()。

高階函式(Higher-order function)：高階函式的意思是它接收另一個函式作為引數。在 javascript 中，函式是一等公民，允許函式作為引數或者返回值傳遞。

得到了下面這個解法：

驗證了一下，發現錯了：

上面的解法，只有在 add()() 情形下是正確的。而當鏈式操作的引數多於兩個或者少於兩個的時候，無法返回結果。

而這個也是這題的一個難點所在，add()的時候，如何既返回一個值又返回一個函式以供後續繼續呼叫？

後來經過高人指點，通過重寫函式的 valueOf 方法或者 toString 方法，可以得到其中一種解法：

嗯？第一眼看到這個解法的時候，我是懵逼的。因為我感覺 fn.valueOf() 從頭到尾都沒有被呼叫過，但是驗證了下結果：

神奇的對了！那麼玄機必然是在上面的 fn.valueOf = function() {} 內了。為何會是這樣呢？這個方法是在函式的什麼時刻執行的？且聽我一步一步道來。

valueOf 和 toString

先來簡單瞭解下這兩個方法：

Object.prototype.valueOf()

用 MDN 的話來說，valueOf() 方法返回指定物件的原始值。

JavaScript 呼叫 valueOf() 方法用來把物件轉換成原始型別的值（數值、字串和布林值）。但是我們很少需要自己呼叫此函式，valueOf 方法一般都會被 JavaScript 自動呼叫。

記住上面這句話，下面我們會細說所謂的自動呼叫是什麼意思。

Object.prototype.toString()

toString() 方法返回一個表示該物件的字串。

每個物件都有一個 toString() 方法，當物件被表示為文字值時或者當以期望字串的方式引用物件時，該方法被自動呼叫。

這裡先記住，valueOf() 和 toString() 在特定的場合下會自行呼叫。

原始型別

好，鋪墊一下，先了解下 javascript 的幾種原始型別，除去 Object 和 Symbol，有如下幾種原始型別：

• Number
• String
• Boolean
• Undefined
• Null

在 JavaScript 進行對比或者各種運算的時候會把物件轉換成這些型別，從而進行後續的操作，下面逐一說明：

String 型別轉換

在某個操作或者運算需要字串而該物件又不是字串的時候，會觸發該物件的 String 轉換，會將非字串的型別嘗試自動轉為 String 型別。系統內部會自動呼叫 toString 函式。舉個例子：

轉換規則：

1. 如果 toString 方法存在並且返回原始型別，返回 toString 的結果。
2. 如果 toString 方法不存在或者返回的不是原始型別，呼叫 valueOf 方法，如果 valueOf 方法存在，並且返回原始型別資料，返回 valueOf 的結果。
3. 其他情況，丟擲錯誤。

上面的例子實際上是：

其中，obj.toString() 的值為 "[object Object]"。

假設是陣列：

上面 + arr ，由於這裡是個字串加操作，後面的 arr 需要轉化為一個字串型別，所以其實是呼叫了 + arr.toString() 。

但是，我們可以自己改寫物件的 toString，valueOf 方法:

上面 alert(obj + '1') ，obj 會自動呼叫自己的 obj.toString() 方法轉化為原始型別，如果我們不重寫它的 toString 方法，將輸出 [object Object]1 ，這裡我們重寫了 toString ，而且返回了一個原始型別字串 111 ，所以最終 alert 出了 1111。

上面的轉化規則寫了，toString 方法需要存在並且返回原始型別，那麼如果返回的不是一個原始型別，則會去繼續尋找物件的 valueOf 方法：

下面我們嘗試證明如果在一個物件嘗試轉換為字串的過程中，如果 toString() 方法不可用的時候，會發生什麼。

這個時候系統會再去呼叫 valueOf() 方法，下面我們改寫物件的 toString 和 valueOf：

從結果可以看到，當 toString 不可用的時候，系統會再嘗試 valueOf 方法，如果 valueOf 方法存在，並且返回原始型別（String、Number、Boolean）資料，返回valueOf的結果。

那麼如果，toString 和 valueOf 返回的都不是原始型別呢？看下面這個例子：

可以發現，如果 toString 和 valueOf 方法均不可用的情況下，系統會直接返回一個錯誤。

新增於 2017-03-07：在查證了 ECMAScript5 官方文件後，發現上面的描述有一點問題，Object 型別轉換為 String 型別的轉換規則遠比上面複雜。轉換規則為：1.設原始值為呼叫 ToPrimitive 的結果；2.返回 ToString(原始值) 。關於 ToPrimitive 和 ToString 的規則可以看看官方文件：ECMAScript5 — ToString

Number 型別轉換

上面描述的是 String 型別的轉換，很多時候也會發生 Number 型別的轉換：

• 呼叫 Number() 函式，強制進行 Number 型別轉換
• 呼叫 Math.sqrt() 這類引數需要 Number 型別的方法
• obj == 1 ，進行對比的時候
• obj + 1 , 進行運算的時候

與 String 型別轉換相似，但是 Number 型別剛好反過來，先查詢自身的 valueOf 方法，再查詢自己 toString 方法：

1. 如果 valueOf 存在，且返回原始型別資料，返回 valueOf 的結果。
2. 如果 toString 存在，且返回原始型別資料，返回 toString 的結果。
3. 其他情況，丟擲錯誤。

按照上述步驟，分別嘗試一下：

Boolean 轉換

什麼時候會進行布林轉換呢：

• 布林比較時
• if(obj) , while(obj) 等判斷時

簡單來說，除了下述 6 個值轉換結果為 false，其他全部為 true：

• undefined
• null
• -0
• 0或+0
• NaN
• ”（空字串）

Function 轉換

好，最後回到我們一開始的題目，來講講函式的轉換。

我們定義一個函式如下：

如果我們僅僅是呼叫 test 而不是 test() ，看看會發生什麼？

可以看到，這裡把我們定義的 test 函式的重新列印了一遍，其實，這裡自行呼叫了函式的 valueOf 方法：

我們改寫一下 test 函式的 valueOf 方法。

與 Number 轉換類似，如果函式的 valueOf 方法返回的不是一個原始型別，會繼續找到它的 toString 方法：

破題

再看回我正文開頭那題的答案，正是運用了函式會自行呼叫 valueOf 方法這個技巧，並改寫了該方法。我們稍作改變，變形如下：

當呼叫一次 add 的時候，實際是是返回 fn 這個 function，實際是也就是返回 fn.valueOf();

其實也就是相當於：

當鏈式呼叫兩次的時候：

當鏈式呼叫三次的時候：

可以看到，這裡其實有一種迴圈。只有最後一次呼叫才真正呼叫到 valueOf，而之前的操作都是合併引數，遞迴呼叫本身，由於最後一次呼叫返回的是一個 fn 函式，所以最終呼叫了函式的 fn.valueOf，並且利用了 reduce 方法對所有引數求和。

除了改寫 valueOf 方法，也可以改寫 toString 方法，所以，如果你喜歡，下面這樣也可以：

這裡有個規律，如果只改寫 valueOf() 或是 toString() 其中一個，會優先呼叫被改寫了的方法，而如果兩個同時改寫，則會像 Number 型別轉換規則一樣，優先查詢 valueOf() 方法，在 valueOf() 方法返回的是非原始型別的情況下再查詢 toString() 方法。

後記

在嘗試了更多的瀏覽器之後，發現了上述解法的諸多問題，在 chrome 56 55 下，結果正常。在更新到最新的 chrome57 ，控制檯下，結果都會帶上 function 欄位，在 firefox 下，直接不生效，感覺自己可能陷入了追求某種解法而忽略了一些底層的具體規範，會在徹底弄清楚後給出另一篇文章。

對於型別轉換，最好還是看看 ECMAScript 規範，拒絕成為伸手黨，自己多嘗試。另外評論處有很多人提出了自己的疑問，值得一看。

像阮一峰老師所說的，“炫耀從來不是我寫作的動機，好奇才是”。本文行文過程也是我自己學習的一個過程，過程中我也遇到了很多困惑，所以即便查閱了官方文件及大量的文章，但是錯誤及疏漏仍然在所難免，歡迎指正及給出更好的方法。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

打賞支援我寫出更多好文章，謝謝！

打賞作者