- 相關(guān)推薦
ＨＲ是如何面試那些前端菜鳥的
xx先后在twitter,Stripe工作，期間會參加面試工作，
ＨＲ是如何面試那些前端菜鳥的
。實際上參加面試工作的人都知道要想在一個較短的時間內(nèi)(30min-1h)就對一個應(yīng)聘者做出判斷其實是很難的，因此我們不得不想盡辦法去更加合理的去判斷面試者。下面是xx理出的一個思路:
如果對方有g(shù)ithub賬號，我們會盡可能的去了解TA在開源項目上的動態(tài)和他的開源項目。我們也會從中挑出一些切入點，通過交流他做這個項目的出發(fā)點也能夠更好的了解面試者的設(shè)計思路，也可以初步的去判斷該人是不是適合團隊。如果雙方交流順暢，接下來會直接進行到代碼等一些基礎(chǔ)問題上來。
自己的面試會很實際，幾乎全部都是coding,很少會提到算法和一些抽象的概念。自己提出的問題看似簡單，但是每一點都涉及到j(luò)avascript的一些知識領(lǐng)域。
面試的時候并不建議使用白板，通常希望面試者自己帶上自己的筆記本，或者就使用自己的。我會將他們的代碼運行，并告知結(jié)果。
Object prototype
我起初會提出一個非常簡單的問題就是定義一個函數(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
接下來，我會去了解面試者對于 arguments的理解，我們會要求面試者定一個log函數(shù)。
log('hello world');
函數(shù)類似實現(xiàn)一個簡單的控制臺輸出，在控制臺輸出傳入的字符串。一邊面試者都會在定義的函數(shù)里直接寫console.log，不過還是有更優(yōu)秀的面試者會直接使用apply。
function log(msg){
console.log(msg);
}
接下來，我會繼續(xù)問如果我傳入多個參數(shù)依舊輸出一個字符串 ，我會提示面試者傳入的 參數(shù)是不固定的，我會暗示xxconsole.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);
};
Context
接下來我想了解面試者對于上下文以及this的理解，我會給出下邊的代碼，讓面試者去解釋count的值，
資料共享平臺
《ＨＲ是如何面試那些前端菜鳥的》(http://www.msguai.com)。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é)，但是個人認為任何一位前端工程師都應(yīng)該對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一部分，我會要求面試者寫點實際的東西。這個非常有用，足以了解前端的技術(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)的問題
【ＨＲ是如何面試那些前端菜鳥的】相關(guān)文章：
如何面試成功07-25
國外HR如何面試07-25
小組面試如何應(yīng)對06-19
如何接聽面試通知電話06-06
小公司如何面試員工12-05
面試如何解釋長期失業(yè)03-13
求職禮儀故事：面試不能說的那些秘密03-16
面試時如何總結(jié)自己的不足08-14
面試時如何回答頻繁跳槽06-08
IT職場面試如何自我介紹03-13