如何面試一個前端開發者？
2017-02-20
首先，我要警告各位的就是： 招人很難！尤其是要在45分鐘之內判斷一個人是否適合崗位更是一項高難度的工作。 面試存在的問題就是大家都想招到一個像自己一樣的人。 每個通過我面試的人的思維方式可能都和我比較相似， 但這樣肯定是不對的。 正因如此， 其實目前為止我做的每一個決定都有一部分運氣成分。 但是我想這種方式會是個很好的開始。
理想情況下，應聘者應該有一份比較完整的GitHub‘簡歷’， 這樣我們可以一起來回顧他們參與的開源項目。 通常我會先瀏覽他們的代碼，然后針對某一個具體的代碼設計問他們一些問題。 如果應聘者在這一部分表現非常優秀，就可以直接進入團隊社交能力的考察部分。否則的話我會讓他們做一些編程題目。
我面試的時候是非常注重實踐的， 整個面試過程幾乎全都是在寫代碼。 我不會問一些比較抽象的或者算法相關的問題。其他的面試官如果愿意的話可以考察這些方面， 但我覺得這些知識未必是一個前端開發者所必需的。我問的問題看起來比較簡單，但實際上每一類問題都可以讓我洞悉應聘者在JavaScript的某一方面的知識。
應聘者可以使用自己的筆記本電腦也可以用我的，但在我這里是不會用白板的。他們也可以使用任何適合自己的編輯器，但我通常直接用Chrome的控制臺來檢查的應聘者的程序輸出結果。
第一部分：對象原型
我們先從簡單的來。實現一個spacify函數：接受一個字符串作為參數，然后把這個字符串的每個字符都用空格隔開后返回。例如：
spacify('hello world') // => 'h e l l o w o r l d'
雖然這個問題看起來非常容易，但結果卻證明從這個問題問起是很合適的，尤其是對于一些電話面試者，他們聲稱了解JavaScript，卻連一個完整的函數都不會寫。下面是這個題目的正確答案，有的應聘者通過循環來實現也是可以的。
function spacify(str) {
return str.split('').join(' ');
}
接下來這個問題是讓應聘者直接為String對象增加spacify的函數，像這樣：
'hello world'.spacify();
通過這個問題我可以了解到應聘者對于函數原型基礎知識的掌握情況。另外這個問題經常會引發另外一個有趣的討論：直接在prototypes上尤其是在Object的prototypes上定義屬性的風險。
最終的答案類似下面的代碼：
String.prototype.spacify = function(){
return this.split('').join(' ');
};
這時候我還會讓應聘者解釋函數表達式（expression）和函數聲明（declaration）的區別。
第二部分：參數
接下來我會問一些簡單的問題，這些問題可以幫我了解到應聘者對參數對象的理解程度。
首先，調用一個尚未定義的log函數：
log('hello world')
然后我讓應聘者去實現log函數：接受一個string參數然后直接傳給console.log()，正確答案就在下面，但有些比較優秀的應聘者會直接使用apply函數來實現。
function log(msg){
console.log(msg);
}
完成上一步后我會修改調用log的方式：傳遞多個參數。告訴應聘者我希望log函數不止接收一個數字作為參數，它應該可以接受任意個數字作為參數。同時我也提醒他們cosole.log()本身就可以接收多個參數。
log('hello', 'world');
理想情況下應聘者應當直接使用apply來實現這個功能。但有時他們會混淆apply和call的二者的區別，這時你可以給他們一些提示。另外將console作為上下文參數這一點也很重要。
function log(){
console.log.apply(console, arguments);
};
然后我會讓要求在每一條日志消息前加上“(app)”的前綴，例如：
'(app) hello world'
現在，問題就有點棘手了。能力強些的應聘者應當知道arguments是一個偽數組，在使用它之前得先把它轉換成標準數組。通常我們用Array.prototype.slice就可以實現這一點，像下面這樣：
function log(){
var args = Array.prototype.slice.call(arguments);
args.unshift('(app)');
console.log.apply(console, args);
};
第三部分：上下文
下面的這一組面試題可以考察應聘者對于JavaScript中context和this的理解。我先給出下面的定義，注意，count的屬性是從當前的上下文中讀取的。
var User = {
count: 1,
getCount: function() {
return this.count;
}
};
然后我會讓應聘者寫出下面代碼的輸出結果：
console.log(User.getCount());
var func = User.getCount;
console.log(func());
這個題目正確的答案是1和undefined。令人吃驚的是有很多人會在這種關于上下文的基礎知識上犯錯。func函數被調用時，它的上下文是windows，而windows是沒有count屬性的。我把這些都和應聘者做了解釋，然后我問他如何才能保證func函數始終都能以User作為上下文被調用，這樣它就能正確運行從而返回1。
正確的答案是使用Function.prototype.bind，例如：
var func = User.getCount.bind(User);
console.log(func());
通常我會告訴應聘者有一些老的瀏覽器是不支持bind函數的，然后讓他們自己來寫一個函數來模擬。有一些基礎差的應聘者并不認可這一點，但對我來講每一個被雇傭的應聘者對apply和call都應該有比較深入的理解，這一點很重要！
Function.prototype.bind = Function.prototype.bind || function(context){
var self = this;
return function(){
return self.apply(context, arguments);
};
}
如果應聘者像上面那樣實現了bind并且還判斷了當前瀏覽器是否已經支持bind函數，那么應聘者可以得到額外的加分。
此時，如果應聘表現的很出色，我會讓他們去實現currying參數。
第四部分：Overlay庫
面試的最后這一部分里，我會讓應聘者做一些更加實際的事情，通常是去實現一個‘overlay’的庫。這很方式很管用，它涉及到了整個前端開發所用到的技術：HTML、CSS 和JavaScript。如果應聘者在前面幾個環節表現優秀，我會盡早的開始這一部分的問題。
具體的實現因人而異，但是這里幾個關鍵點需要注意！
對于overlay covers，最好使用 position: fixed 而不是 position: absolute，這樣即使窗口滾動的時候也可以保證層鋪滿整個窗口。如果應聘者沒有注意到這一點我會提示他們，然后問他們這兩者的區別。
.overlay {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: rgba(0,0,0,.8);
}
從把內容放置到層的中心位置的方式也可以為面試官提供一些信息。有些應聘者可能會使用CSS和絕對位置，但這樣的前提是內容必須是固定寬度和長度的。另外的應聘者也可能會選擇用JavaScript來定位。
.overlay article {
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px;
width: 400px;
height: 400px;
}
我還會要求他們實現單擊關閉層的功能，然后就可以順勢討論下幾種不同類型的事件傳播機制。大多數應聘者會直接為層設置一個事件監聽器。
$('.overlay').click(closeOverlay);
看著是對的，但很快你就會發現在這個層的子元素上單擊也會關閉層，這明顯不是我們預期的效果。解決方法是先檢查事件的targets來確保不是一個傳播事件，像這樣：
$('.overlay').click(function(e){
if (e.target == e.currentTarget)
closeOverlay();
});
其它
其實這些問題只覆蓋了前端知識的很小一部分，面試的時候你可以問很多其他方面的問題，例如性能、HTML5 APIs, AMD vs CommonJS modules、 構造函數、數據類型以及盒模型等。我經常會根據應聘者的興趣來搭配不同類型的問題。
