最近發現了一道前端JS面試題，仔細審這道前端JS面試題後發現還是很有意思的，給大家分享過來。
請實作一個函數，運算結果可以滿足如下預期結果：
add(1)(2) // 3
add(1 , 2, 3)(10) // 16
add(1)(2)(3)(4)(5) // 15
對於一個好奇的切圖仔來說，忍不住動手嘗試了一下，看到題目首先想到的是會用到高階函數以及Array.prototype.reduce()。
推薦相關文章：2020年最全js面試題整理（最新）
高階函數(Higher-order function)：高階函數的意思是它接收另一個函數作為參數。在 javascript 中，函數是一等公民，允許函數作為參數或傳回值傳遞。
得到了下面這個解法：
function add() {
var args = Array.prototype.slice.call(arguments);
return function() {
var arg2 = Array.prototype.slice.call(arguments);
return args.concat(arg2).reduce(function(a, b){
return a + b;
});
}
}驗證了一下，發現錯了：
add(1)(2) // 3 add(1, 2)(3) // 6 add(1)(2)(3) // Uncaught TypeError: add(...)(...) is not a function(…)
上面的解法，只有在add()() 情形下是正確的。而當鍊式操作的參數多於兩個或少於兩個的時候，無法傳回結果。
而這個也是這題的一個難點所在，add()的時候，如何既回傳一個值又回傳一個函數以供後續繼續呼叫？
後來經過高人指點，透過重寫函數的 valueOf 方法或 toString 方法，可以得到其中一種解法：
function add () {
var args = Array.prototype.slice.call(arguments);
var fn = function () {
var arg_fn = Array.prototype.slice.call(arguments);
return add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function () {
return args.reduce(function(a, b) {
return a + b;
})
}
return fn;
}嗯？第一眼看到這個解法的時候，我是懵逼的。因為我感覺 fn.valueOf() 從頭到尾都沒有被呼叫過，但是驗證了下結果：
add(1) // 1 add(1,2)(3) //6 add(1)(2)(3)(4)(5) // 15
神奇的對了！那麼玄機必然是在上面的 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 函數。舉個例子：
var obj = {name: 'Coco'};
var str = '123' + obj;
console.log(str); // 123[object Object]轉換規則：
如果 toString 方法存在並且傳回原始型別，傳回 toString 的結果。
如果 toString 方法不存在或傳回的不是原始類型，呼叫 valueOf 方法，如果 valueOf 方法存在，並且傳回原始類型數據，傳回 valueOf 的結果。
其他情況，拋出錯誤。
上面的範例其實是：
var obj = {name: 'Coco'};
var str = '123' + obj.toString();其中，obj.toString() 的值為 "[object Object]"。
假設是陣列：
var arr = [1, 2]; var str = '123' + arr; console.log(str); // 1231,2
上面+ arr ，由於這裡是個字串加上操作，後面的arr 需要轉換成一個字串型，所以其實是呼叫了+ arr.toString( ) 。
但是，我們可以自己改寫物件的toString，valueOf 方法:
var obj = {
toString: function() {
console.log('调用了 obj.toString');
return {};
},
valueOf: function() {
console.log('调用了 obj.valueOf')
return '110';
}
}
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// 110上面alert(obj + '1') ，obj 會自動呼叫自己的obj.toString() 方法轉換為原始型，如果我們不重寫它的toString 方法，將輸出[object Object]1 ，這裡我們重寫了toString ，而且回傳了一個原始型別字串111 ，所以最終alert 出了1111。
上面的轉換規則寫了，toString 方法需要存在並且傳回原始類型，那麼如果傳回的不是一個原始類型，則會去繼續尋找物件的valueOf 方法：
下面我們嘗試證明如果在一個物件嘗試轉換為字串的過程中，如果toString() 方法不可用的時候，會發生什麼。
這時候系統會再去呼叫 valueOf() 方法，下面我們改寫物件的 toString 和 valueOf：
var obj = {
toString: function() {
console.log('调用了 obj.toString');
return {};
},
valueOf: function() {
console.log('调用了 obj.valueOf')
return '110';
}
}
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// 110从结果可以看到，当 toString 不可用的时候，系统会再尝试 valueOf 方法，如果 valueOf 方法存在，并且返回原始类型（String、Number、Boolean）数据，返回valueOf的结果。
那么如果，toString 和 valueOf 返回的都不是原始类型呢？看下面这个例子：
var obj = {
toString: function() {
console.log('调用了 obj.toString');
return {};
},
valueOf: function() {
console.log('调用了 obj.valueOf')
return {};
}
}
alert(obj);
// 调用了 obj.toString
// 调用了 obj.valueOf
// Uncaught TypeError: Cannot convert object to primitive value可以发现，如果 toString 和 valueOf 方法均不可用的情况下，系统会直接返回一个错误。
在查证了 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 方法：
如果 valueOf 存在，且返回原始类型数据，返回 valueOf 的结果。
如果 toString 存在，且返回原始类型数据，返回 toString 的结果。
其他情况，抛出错误。
按照上述步骤，分别尝试一下：
var obj = {
valueOf: function() {
console.log('调用 valueOf');
return 5;
}
}
console.log(obj + 1);
// 调用 valueOf
// 6
var obj = {
valueOf: function() {
console.log('调用 valueOf');
return {};
},
toString: function() {
console.log('调用 toString');
return 10;
}
}
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// 11
var obj = {
valueOf: function() {
console.log('调用 valueOf');
return {};
},
toString: function() {
console.log('调用 toString');
return {};
}
}
console.log(obj + 1);
// 调用 valueOf
// 调用 toString
// Uncaught TypeError: Cannot convert object to primitive valueBoolean 转换
什么时候会进行布尔转换呢：
布尔比较时
if(obj) , while(obj) 等判断时
简单来说，除了下述 6 个值转换结果为 false，其他全部为 true：
undefined
null
-0
0或+0
NaN
Boolean(undefined) // false Boolean(null) // false Boolean(0) // false Boolean(NaN) // false Boolean('') // false
Function 转换
好，最后回到我们一开始的题目，来讲讲函数的转换。
我们定义一个函数如下：
function test() {
var a = 1;
console.log(1);
}如果我们仅仅是调用 test 而不是 test() ，看看会发生什么？
可以看到，这里把我们定义的 test 函数的重新打印了一遍，其实，这里自行调用了函数的 valueOf 方法：
我们改写一下 test 函数的 valueOf 方法。
test.valueOf = function() {
console.log('调用 valueOf 方法');
return 2;
}
test;
// 输出如下：
// 调用 valueOf 方法
// 2与 Number 转换类似，如果函数的 valueOf 方法返回的不是一个原始类型，会继续找到它的 toString 方法：
test.valueOf = function() {
console.log('调用 valueOf 方法');
return {};
}
test.toString= function() {
console.log('调用 toString 方法');
return 3;
}
test;
// 输出如下：
// 调用 valueOf 方法
// 调用 toString 方法
// 3破题
再看回我正文开头那题的答案，正是运用了函数会自行调用 valueOf 方法这个技巧，并改写了该方法。我们稍作改变，变形如下：
function add () {
console.log('进入add');
var args = Array.prototype.slice.call(arguments);
var fn = function () {
var arg_fn = Array.prototype.slice.call(arguments);
console.log('调用fn');
return add.apply(null, args.concat(arg_fn));
}
fn.valueOf = function () {
console.log('调用valueOf');
return args.reduce(function(a, b) {
return a + b;
})
}
return fn;
}当调用一次 add 的时候，实际是是返回 fn 这个 function，实际是也就是返回 fn.valueOf();
add(1);
// 输出如下：
// 进入add
// 调用valueOf
// 1
其实也就是相当于：
[1].reduce(function(a, b) {
return a + b;
})
// 1当链式调用两次的时候：
add(1)(2); // 输出如下： // 进入add // 调用fn // 进入add // 调用valueOf // 3
当链式调用三次的时候：
add(1)(2)(3); // 输出如下： // 进入add // 调用fn // 进入add // 调用fn // 进入add // 调用valueOf // 6
可以看到，这里其实有一种循环。只有最后一次调用才真正调用到 valueOf，而之前的操作都是合并参数，递归调用本身，由于最后一次调用返回的是一个 fn 函数，所以最终调用了函数的 fn.valueOf，并且利用了 reduce 方法对所有参数求和。
除了改写 valueOf 方法，也可以改写 toString 方法，所以，如果你喜欢，下面这样也可以：
function add () {
var args = Array.prototype.slice.call(arguments);
var fn = function () {
var arg_fn = Array.prototype.slice.call(arguments);
return add.apply(null, args.concat(arg_fn));
}
fn.toString = function() {
return args.reduce(function(a, b) {
return a + b;
})
}
return fn;
}这里有个规律，如果只改写 valueOf() 或是 toString() 其中一个，会优先调用被改写了的方法，而如果两个同时改写，则会像 Number 类型转换规则一样，优先查询 valueOf() 方法，在 valueOf() 方法返回的是非原始类型的情况下再查询 toString() 方法。
后记
在尝试了更多的浏览器之后，发现了上述解法的诸多问题，在 chrome 56 55 下，结果正常。在更新到最新的 chrome57 ，控制台下，结果都会带上 function 字段，在 firefox 下，直接不生效，感觉自己可能陷入了追求某种解法而忽略了一些底层的具体规范，会在彻底弄清楚后给出另一篇文章。
对于类型转换，最好还是看看 ECMAScript 规范，拒绝成为伸手党，自己多尝试。另外评论处有很多人提出了自己的疑问，值得一看。
正如俗话所说：“炫耀从来不是我写作的动机，好奇才是”。此前端JS面试题的解读也是我自己学习的一个过程，过程中我也遇到了很多困惑，所以即便查阅了官方文档及大量的文章，但是错误及疏漏仍然在所难免，欢迎指正及给出更好的方法。
到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
相关推荐：
JavaScript代表算術常數e即自然對數的底數的屬性Math.E
JavaScript根據格林威治時間把Date物件轉換為字串並傳回結果toGMTString()
以上是前端JS面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
