我是如何面試WEB前端開發人員的

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

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

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);
  };
}

一個彈窗庫

面試的最後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，數據類型，以及盒子模型。我經常都會隨着面試者的進行去選擇相應的問題。
歡迎加入我們
結語

感謝您的觀看，如有不足之處，歡迎批評指正。

獲取資料

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。