摘要：作者先后在工作，期間會參加面試工作。的上下文是，因此已經(jīng)失去了屬性。一個彈窗庫面試的最后一部分，我會要求面試者寫點實際的東西。這個非常有用，足以了解前端的技術(shù)棧。一些面試者會使用絕對定位，而有的面試者則更擅長使用。

文章來自翻譯，其中忽略了一些無關(guān)緊要的內(nèi)容直入主題。

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

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

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

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

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

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

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

正確的答案如下，不過一些面試者或許會選擇for循環(huán)，當(dāng)然這并沒有錯

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

接下來，我會繼續(xù)問如何將這個函數(shù)直接作用在一個字符串對象上.

"hello world".spacify();

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

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

一般到這里我會讓面試者講講函數(shù)聲明和函數(shù)表達式的區(qū)別。

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

log("hello world");

函數(shù)類似實現(xiàn)一個簡單的控制臺輸出，在控制臺輸出傳入的字符串。一邊面試者都會在定義的函數(shù)里直接寫console.log，不過還是有更優(yōu)秀的面試者會直接使用apply。

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

接下來，我會繼續(xù)問如果我傳入多個參數(shù)依舊輸出一個字符串
，我會提示面試者傳入的 參數(shù)是不固定的，我會暗示作者console.log實際上也接受多個參數(shù)。

log("hello", "world");

不過我還是希望您的面試者現(xiàn)在已經(jīng)想起apply;面試者可能會在apply和 call上困惑，這個時候我會做點小提示，不過將console上下文傳入也是非常重要的.

function log(){
  console.log.apply(console, arguments);
};

接著我會繼續(xù)追問，如果我希望在那個輸出的字符串前統(tǒng)一加上(app) 這樣的字符串，類似于這樣:

"(app) hello world"

這個問題明顯會復(fù)雜很多，面試者應(yīng)該知道arguments是一個偽數(shù)組，我們需要先將它轉(zhuǎn)換成正常的數(shù)組，我們可以使用Array.prototype.slice,代碼如下:

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift("(app)");

  console.log.apply(console, args);
};

接下來我想了解面試者對于上下文以及this的理解，我會給出下邊的代碼，讓面試者去解釋count的值。

var User = {
  count: 1,

  getCount: function() {
    return this.count;
  }
};

接下來我會給出下面的代碼，讓面試者去回答應(yīng)該輸出的正確答案。

console.log(User.getCount());

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

上面的例子中正確輸出1和undefined。實際上很多面試者都會在這里跌倒。func的上下文是 ｀window，因此已經(jīng)失去了count屬性。接下來我回繼續(xù)追問面試者如何確保func的上下文始終都和User關(guān)聯(lián)，這樣可以使輸出的答案是1。

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

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

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

Function.prototype.bind = Function.prototype.bind || function(context) {
    var self = this;

    return function(){
        return self.apply(context,   arguments);
  };
}

一個彈窗庫

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

雖然最終效果取決于面試者的實現(xiàn)，但是這里依舊有足夠的考察點。

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

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

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

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

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

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

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

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

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

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

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