很是值得一看的前端面試文章

文章來自翻譯，其中忽略了一些可有可無的內容直入主題。

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

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

本身的面試會很實際，幾乎所有都是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，數據類型，以及盒子模型。我常常都會隨着面試者的進行去選擇相應的問題。

最後推薦你們均可以去看下Front-end-Developer-Interview-Questions 以及 JavaScript Garden.

翻譯原文地址：http://blog.sourcing.io/inter...