一篇非常不錯的前端面試文章

譯者 | JackPu

原文 | Interviewing a front-end developer

譯文｜(譯)一篇非常不錯的前端面試文章

作者先後在twitter,Stripe工作，期間會參加面試工作。實際上參加面試工作的人都知道要想在一個較短的時間內（30min-1h）就對一個應聘者做出判斷其實是很難的，因此我們不得不想盡辦法去更加合理的去判斷面試者。下面是作者理出的一個思路:

如果對方有github賬號，我們會儘可能的去了解TA在開源項目上的動態和他的開源項目。我們也會從中挑出一些切入點，通過交流他做這個項目的出發點也能夠更好的了解面試者的設計思路，也可以初步的去判斷該人是不是適合團隊。如果雙方交流順暢，接下來會直接進行到代碼等一些基礎問題上來。

自己的面試會很實際，幾乎全部都是coding,很少會提到演算法和一些抽象的概念。自己提出的問題看似簡單，但是每一點都涉及到javascript的一些知識領域。

面試的時候並不建議使用白板，通常希望面試者自己帶上自己的筆記本，或者就使用自己的。我會將他們的代碼運行，並告知結果。

1. Object prototype

   我起初會提出一個非常簡單的問題就是定義一個函數spacify ,將一個字元串作為參數傳入，然後返回一個字元串，不過該字元串相對原有傳入參數的變化是字母與字母之間多了一個空格。

spacify("hello world") // => "h e l l o w o r l d"

雖然問題很簡單，但這卻是一個很好的開始，我們接下來的問題便可以圍繞此展開, 尤其對於那些聲稱自己了解Javascript，但實際卻連一個函數都不會寫的面試者高下立判。

正確的答案如下，不過一些面試者或許會選擇for循環，當然這並沒有錯

function spacify(str) { return str.split("").join(" ");}

接下來，我會繼續問如何將這個函數直接作用在一個字元串對象上.

"hello world".spacify();

這個問題可以讓我了解面試者對原型鏈的理解，這個問題可以讓彼此展開一些有討論，諸如直接在原型鏈上定義屬性的危害等等.實際期待結果:

String.prototype.spacify = function(){ return this.split("").join(" ");};

一般到這裡我會讓面試者講講函數聲明和函數表達式的區別。

Arguments

接下來，我會去了解面試者對於 arguments的理解，我們會要求面試者定一個log函數。

log("hello world");

函數類似實現一個簡單的控制台輸出，在控制台輸出傳入的字元串。一邊面試者都會在定義的函數里直接寫console.log，不過還是有更優秀的面試者會直接使用apply。

function log(msg){ console.log(msg);}

接下來，我會繼續問如果我傳入多個參數依舊輸出一個字元串 ，我會提示面試者傳入的 參數是不固定的，我會暗示作者console.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);};

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的上下文是 ｀window，因此已經失去了count屬性。接下來我回繼續追問面試者如何確保func的上下文始終都和User關聯，這樣可以使輸出的答案是1。

正確答案是使用Function.prototype.bind，代碼如下:

var func = User.getCount.bind(User); console.log(func());

這個時候我會讓面試者去進行完善，如果老的瀏覽器並不支持該方法，我們應該怎樣去兼容。部分基礎較差的面試者會比較糾結，但是個人認為任何一位前端工程師都應該對apply和call有著較為深刻的理解。

Function.prototype.bind = Function.prototype.bind || function(context) { var self = this; return function(){ return self.apply(context, arguments); };}

Extra points if the candidate shims bind so that it uses the browser"s native version if available. At this point, if the candidate is doing really well, I"ll ask them to implement currying arguments.

面試的最後y一部分，我會要求面試者寫點實際的東西。這個非常有用，足以了解前端的技術棧。如果前面的問題回答的較為理想，這個問題，我會非常迅速的展開最後一個問題的考察。

雖然最終效果取決於面試者的實現，但是這裡依舊有足夠的考察點。

最好不使用 position:absolute而是position:fixed，這個時候即使窗體有滾動，也可以很好的遮罩住全局。我會提示面試者這樣使用，並且追問這兩者的區別。

.overlay { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.8);}

如何將裡面的內容居中也是一個非常重要的考察點。一些面試者會使用絕對定位，而有的面試者則更擅長使用Js。

.overlay article { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; width: 400px; height: 400px;}

我會繼續問，如何確保點擊遮罩層時遮罩層是關閉的？這個問題可以將我們的討論落腳到 冒泡中來。很多面試者都會直接將點擊實踐綁定到遮罩層上。

$(".overlay").click(closeOverlay);

這個接下來可以工作了，但是你會發現如果點擊了遮罩層中的子元素，遮罩層也會關閉。解決方案是便是判斷event target ，並且保證 這個時間不會冒泡。

$(".overlay").click(function(e){ if (e.target == e.currentTarget) closeOverlay();});

尾聲

當然前面的知識點僅僅是前端的一部分，實際上你還可以問:性能，HTML5 APIs， AMD vs CommonJS modules，constructors，數據類型，以及盒子模型。我經常都會隨著面試者的進行去選擇相應的問題。

最後推薦大家都可以去看下Front-end-Developer-Interview-Questions 以及 JavaScript Garden.