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

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

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

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

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

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

第一部分：對(duì)象原型

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

JavaScript

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

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

JavaScript

1

2

3function spacify（str） {

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

}

接下來(lái)這個(gè)問(wèn)題是讓應(yīng)聘者直接為String對(duì)象增加spacify的函數(shù)，像這樣：

JavaScript

1‘hello world’.spacify（）;

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

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

JavaScript

1

2

3String.prototype.spacify = function（）{

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

};

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

第二部分：參數(shù)

接下來(lái)我會(huì)問(wèn)一些簡(jiǎn)單的問(wèn)題，這些問(wèn)題可以幫我了解到應(yīng)聘者對(duì)參數(shù)對(duì)象的理解程度。

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

JavaScript

1log（‘hello world’）

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

JavaScript

1

2

3function log（msg）{

console.log（msg）;

}

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

JavaScript

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

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

JavaScript

1

2

3function log（）{

console.log.apply（console， arguments）;

};

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

JavaScript

1‘（app） hello world’

現(xiàn)在，問(wèn)題就有點(diǎn)棘手了。能力強(qiáng)些的應(yīng)聘者應(yīng)當(dāng)知道arguments是一個(gè)偽數(shù)組，在使用它之前得先把它轉(zhuǎn)換成標(biāo)準(zhǔn)數(shù)組。通常我們用Array.prototype.slice就可以實(shí)現(xiàn)這一點(diǎ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)聘者對(duì)于JavaScript中context和this的理解。我先給出下面的定義，注意，count的屬性是從當(dāng)前的上下文中讀取的。

JavaScript

1

2

3

4

5

6var User = {

count： 1，

getCount： function（） {

return this.count;

}

};

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

JavaScript

1

2

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

var func = User.getCount;

console.log（func（））;

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

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

JavaScript

1

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

console.log（func（））;

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

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

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

第四部分：Overlay庫(kù)

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

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

對(duì)于overlay covers，最好使用 position： fixed 而不是 position： absolute，這樣即使窗口滾動(dòng)的時(shí)候也可以保證層鋪滿整個(gè)窗口。如果應(yīng)聘者沒(méi)有注意到這一點(diǎn)我會(huì)提示他們，然后問(wèn)他們這兩者的區(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)聘者可能會(huì)使用CSS和絕對(duì)位置，但這樣的前提是內(nèi)容必須是固定寬度和長(zhǎng)度的。另外的應(yīng)聘者也可能會(huì)選擇用JavaScript來(lái)定位。

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;

}

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

JavaScript

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

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

JavaScript

1

2

3

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

if （e.target == e.currentTarget）

closeOverlay（）;

}）;

其它

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