前端開發(fā)工程師面試技巧

我在Twitter和Stripe這兩家公司工作期間會負責(zé)一些前端開發(fā)者的面試。在面試過程中我們有很大的決定權(quán)，這里和大家一起分享一些我設(shè)計的不同類型的面試問題。

首先，我要警告各位的就是： 招人很難！尤其是要在45分鐘之內(nèi)判斷一個人是否適合崗位更是一項高難度的工作。 面試存在的問題就是大家都想招到像一個像自己一樣的人。 每個通過我面試的人的思維方式可能都和我比較相似， 但這樣肯定是不對的。 正因如此， 其實目前為止我做的每一個決定都有一部分運氣成分。 但是我想這種方式會是個很好的開始。

理想情況下，應(yīng)聘者應(yīng)該有一份比較完整的GitHub‘簡歷’， 這樣我們可以一起來回顧他們參與的開源項目。 通常我會先瀏覽他們的代碼，然后針對某一個具體的代碼設(shè)計問他們一些問題。 如果應(yīng)聘者在這一部分表現(xiàn)非常優(yōu)秀，就可以直接進入團隊社交能力的考察部分。否則的話我會讓他們做一些編程題目。

我面試的時候是非常注重實踐的， 整個面試過程幾乎全都是在寫代碼。 我不會問一些比較抽象的或者算法相關(guān)的問題。其他的面試官如果愿意的話可以考察這些方面， 但我覺得這些知識未必是一個前端開發(fā)者所必需的。我問的問題看起來比較簡單，但實際上每一類問題都可以讓我洞悉應(yīng)聘者在JavaScript的某一方面的知識。

應(yīng)聘者可以使用自己的筆記本電腦也可以用我的，但在我這里是不會用白板的。他們也可以使用任何適合自己的編輯器，但我通常直接用Chrome的控制臺來檢查的應(yīng)聘者的程序輸出結(jié)果。

第一部分：對象原型

我們先從簡單的來。實現(xiàn)一個spacify函數(shù)：接受一個字符串作為參數(shù)，然后把這個字符串的每個字符都用空格隔開后返回。例如：

JavaScript

1spacify（‘hello world’） // =》 ‘h e l l o w o r l d’

雖然這個問題看起來非常容易，但結(jié)果卻證明從這個問題問起是很合適的，尤其是對于一些電話面試者，他們聲稱了解JavaScript，卻連一個完整的函數(shù)都不會寫。下面是這個題目的正確答案，有的應(yīng)聘者通過循環(huán)來實現(xiàn)也是可以的。

JavaScript

1

2

3function spacify（str） {

return str.split（‘’）.join（‘ ’）;

}

接下來這個問題是讓應(yīng)聘者直接為String對象增加spacify的函數(shù)，像這樣：

JavaScript

1‘hello world’.spacify（）;

通過這個問題我可以了解到應(yīng)聘者對于函數(shù)原型基礎(chǔ)知識的掌握情況。另外這個問題經(jīng)常會引發(fā)另外一個有趣的討論：直接在prototypes上尤其是在Object的prototypes上定義屬性的風(fēng)險。

最終的答案類似下面的代碼：

JavaScript

1

2

3String.prototype.spacify = function（）{

return this.split（‘’）.join（‘ ’）;

};

這時候我還會讓應(yīng)聘者解釋函數(shù)表達式（expression）和函數(shù)聲明（declaration）的區(qū)別。

第二部分：參數(shù)

接下來我會問一些簡單的問題，這些問題可以幫我了解到應(yīng)聘者對參數(shù)對象的理解程度。

首先，調(diào)用一個尚未定義的log函數(shù)：

JavaScript

1log（‘hello world’）

然后我讓應(yīng)聘者去實現(xiàn)log函數(shù)：接受一個string參數(shù)然后直接傳給console.log（），正確答案就在下面，但有些比較優(yōu)秀的應(yīng)聘者會直接使用apply函數(shù)來實現(xiàn)。

JavaScript

1

2

3function log（msg）{

console.log（msg）;

}

完成上一步后我會修改調(diào)用log的方式：傳遞多個參數(shù)。告訴應(yīng)聘者我希望log函數(shù)不止接收一個數(shù)字作為參數(shù)，它應(yīng)該可以接受任意個數(shù)字作為參數(shù)。同時我也提醒他們cosole.log（）本身就可以接收多個參數(shù)。

JavaScript

1log（‘hello’， ‘world’）;

理想情況下應(yīng)聘者應(yīng)當直接使用apply來實現(xiàn)這個功能。但有時他們會混淆apply和call的二者的區(qū)別，這時你可以給他們一些提示。另外將console作為上下文參數(shù)這一點也很重要。

JavaScript

1

2

3function log（）{

console.log.apply（console， arguments）;

};

然后我會讓要求在每一條日志消息前加上“（app）”的前綴，例如：

JavaScript

1‘（app） hello world’

現(xiàn)在，問題就有點棘手了。能力強些的應(yīng)聘者應(yīng)當知道arguments是一個偽數(shù)組，在使用它之前得先把它轉(zhuǎn)換成標準數(shù)組。通常我們用Array.prototype.slice就可以實現(xiàn)這一點，像下面這樣：

JavaScript

1

2

3

4

5function log（）{

var args = Array.prototype.slice.call（arguments）;

args.unshift（‘（app）’）;

console.log.apply（console， args）;

};

第三部分：上下文

下面的這一組面試題可以考察應(yīng)聘者對于JavaScript中context和this的理解。我先給出下面的定義，注意，count的屬性是從當前的上下文中讀取的。

JavaScript

1

2

3

4

5

6var User = {

count： 1，

getCount： function（） {

return this.count;

}

};

然后我會讓應(yīng)聘者寫出下面代碼的輸出結(jié)果：

JavaScript

1

2

3console.log（User.getCount（））;

var func = User.getCount;

console.log（func（））;

這個題目正確的答案是1和undefined。令人吃驚的是有很多人會在這種關(guān)于上下文的基礎(chǔ)知識上犯錯。func函數(shù)被調(diào)用時，它的上下文是windows，而windows是沒有count屬性的。我把這些都和應(yīng)聘者做了解釋，然后我問他如何才能保證func函數(shù)始終都能以User作為上下文被調(diào)用，這樣它就能正確運行從而返回1。

正確的答案是使用Function.prototype.bind，例如：

JavaScript

1

2var func = User.getCount.bind（User）;

console.log（func（））;

通常我會告訴應(yīng)聘者有一些老的瀏覽器是不支持bind函數(shù)的，然后讓他們自己來寫一個函數(shù)來模擬。有一些基礎(chǔ)差的應(yīng)聘者并不認可這一點，但對我來講每一個被雇傭的應(yīng)聘者對apply和call都應(yīng)該有比較深入的理解，這一點很重要！

JavaScript

1

2

3

4

5

6Function.prototype.bind = Function.prototype.bind || function（context）{

var self = this;

return function（）{

return self.apply（context， arguments）;

};

}

如果應(yīng)聘者像上面那樣實現(xiàn)了bind并且還判斷了當前瀏覽器是否已經(jīng)支持bind函數(shù)，那么應(yīng)聘者可以得到額外的加分。

此時，如果應(yīng)聘表現(xiàn)的很出色，我會讓他們?nèi)崿F(xiàn)currying參數(shù)。

第四部分：Overlay庫

面試的最后這一部分里，我會讓應(yīng)聘者做一些更加實際的事情，通常是去實現(xiàn)一個‘overlay’的庫。這很方式很管用，它涉及到了整個前端開發(fā)所用到的技術(shù)：HTML、CSS 和JavaScript。如果應(yīng)聘者在前面幾個環(huán)節(jié)表現(xiàn)優(yōu)秀，我會盡早的開始這一部分的問題。

具體的實現(xiàn)因人而異，但是這里幾個關(guān)鍵點需要注意！

對于overlay covers，最好使用 position： fixed 而不是 position： absolute，這樣即使窗口滾動的時候也可以保證層鋪滿整個窗口。如果應(yīng)聘者沒有注意到這一點我會提示他們，然后問他們這兩者的區(qū)別。

CSS

1

2

3

4

5

6

7

8.overlay {

position： fixed;

left： 0;

right： 0;

bottom： 0;

top： 0;

background： rgba（0，0，0，.8）;

}

從把內(nèi)容放置到層的中心位置的方式也可以為面試官提供一些信息。有些應(yīng)聘者可能會使用CSS和絕對位置，但這樣的前提是內(nèi)容必須是固定寬度和長度的。另外的應(yīng)聘者也可能會選擇用JavaScript來定位。

CSS

1

2

3

4

5

6

7

8.overlay article {

position： absolute;

left： 50%;

top： 50%;

margin： -200px 0 0 -200px;

width： 400px;

height： 400px;

}

我還會要求他們實現(xiàn)單擊關(guān)閉層的功能，然后就可以順勢討論下幾種不同類型的事件傳播機制。大多數(shù)應(yīng)聘者會直接為層設(shè)置一個事件監(jiān)聽器。

JavaScript

1$（‘.overlay’）.click（closeOverlay）;

看著是對的，但很快你就會發(fā)現(xiàn)在這個層的子元素上單擊也會關(guān)閉層，這明顯不是我們預(yù)期的效果。解決方法是先檢查事件的targets來確保不是一個傳播事件，像這樣：

JavaScript

1

2

3

4$（‘.overlay’）.click（function（e）{

if （e.target == e.currentTarget）

closeOverlay（）;

}）;

其它

其實這些問題只覆蓋了前端知識的很小一部分，面試的時候你可以問很多其他方面的問題，例如性能、HTML5 APIs， AMD vs CommonJS modules、 構(gòu)造函數(shù)、數(shù)據(jù)類型以及盒模型等。我經(jīng)常會根據(jù)應(yīng)聘者的興趣來搭配不同類型的問題。