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

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

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

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

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

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

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

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

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

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

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

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

"hello world".spacify();

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

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

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

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

log("hello world");

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

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

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

log("hello", "world");

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

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

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

"(app) hello world"

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

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

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

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

var User = {
  count: 1,

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

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

console.log(User.getCount());

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

上面的例子中正確輸出1和undefined。實(shí)際上很多面試者都會(huì)在這里跌倒。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());

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

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

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

一個(gè)彈窗庫

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

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

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

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

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

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

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

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

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

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

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

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

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