前端JS面試題

最近發現了一道前端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 value

Boolean 转换

什么时候会进行布尔转换呢：

布尔比较时

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？ JavaScript的用法？

JavaScript代表算術常數e即自然對數的底數的屬性Math.E

JavaScript根據格林威治時間把Date物件轉換為字串並傳回結果toGMTString()

以上是前端JS面試題的詳細內容。更多資訊請關注PHP中文網其他相關文章！