- 相關(guān)推薦
ＨＲ是如何面試那些前端菜鳥(niǎo)的
xx先后在twitter,Stripe工作，期間會(huì)參加面試工作，
ＨＲ是如何面試那些前端菜鳥(niǎo)的
。實(shí)際上參加面試工作的人都知道要想在一個(gè)較短的時(shí)間內(nèi)(30min-1h)就對(duì)一個(gè)應(yīng)聘者做出判斷其實(shí)是很難的，因此我們不得不想盡辦法去更加合理的去判斷面試者。下面是xx理出的一個(gè)思路:
如果對(duì)方有g(shù)ithub賬號(hào)，我們會(huì)盡可能的去了解TA在開(kāi)源項(xiàng)目上的動(dòng)態(tài)和他的開(kāi)源項(xiàng)目。我們也會(huì)從中挑出一些切入點(diǎn)，通過(guò)交流他做這個(gè)項(xiàng)目的出發(fā)點(diǎn)也能夠更好的了解面試者的設(shè)計(jì)思路，也可以初步的去判斷該人是不是適合團(tuán)隊(duì)。如果雙方交流順暢，接下來(lái)會(huì)直接進(jìn)行到代碼等一些基礎(chǔ)問(wèn)題上來(lái)。
自己的面試會(huì)很實(shí)際，幾乎全部都是coding,很少會(huì)提到算法和一些抽象的概念。自己提出的問(wèn)題看似簡(jiǎn)單，但是每一點(diǎn)都涉及到j(luò)avascript的一些知識(shí)領(lǐng)域。
面試的時(shí)候并不建議使用白板，通常希望面試者自己帶上自己的筆記本，或者就使用自己的。我會(huì)將他們的代碼運(yùn)行，并告知結(jié)果。
Object prototype
我起初會(huì)提出一個(gè)非常簡(jiǎn)單的問(wèn)題就是定義一個(gè)函數(shù)spacify ,將一個(gè)字符串作為參數(shù)傳入，然后返回一個(gè)字符串，不過(guò)該字符串相對(duì)原有傳入?yún)?shù)的變化是字母與字母之間多了一個(gè)空格。
spacify('hello world') // => 'h e l l o w o r l d'
雖然問(wèn)題很簡(jiǎn)單，但這卻是一個(gè)很好的開(kāi)始，我們接下來(lái)的問(wèn)題便可以圍繞此展開(kāi), 尤其對(duì)于那些聲稱(chēng)自己了解Javascript，但實(shí)際卻連一個(gè)函數(shù)都不會(huì)寫(xiě)的面試者高下立判。
正確的答案如下，不過(guò)一些面試者或許會(huì)選擇for循環(huán)，當(dāng)然這并沒(méi)有錯(cuò)
function spacify(str) {
return str.split('').join(' ');
}
接下來(lái)，我會(huì)繼續(xù)問(wèn)如何將這個(gè)函數(shù)直接作用在一個(gè)字符串對(duì)象上.
'hello world'.spacify();
這個(gè)問(wèn)題可以讓我了解面試者對(duì)原型鏈的理解，這個(gè)問(wèn)題可以讓彼此展開(kāi)一些有討論，諸如直接在原型鏈上定義屬性的危害等等.實(shí)際期待結(jié)果:
String.prototype.spacify = function(){
return this.split('').join(' ');
};
一般到這里我會(huì)讓面試者講講函數(shù)聲明和函數(shù)表達(dá)式的區(qū)別。
Arguments
接下來(lái)，我會(huì)去了解面試者對(duì)于 arguments的理解，我們會(huì)要求面試者定一個(gè)log函數(shù)。
log('hello world');
函數(shù)類(lèi)似實(shí)現(xiàn)一個(gè)簡(jiǎn)單的控制臺(tái)輸出，在控制臺(tái)輸出傳入的字符串。一邊面試者都會(huì)在定義的函數(shù)里直接寫(xiě)console.log，不過(guò)還是有更優(yōu)秀的面試者會(huì)直接使用apply。
function log(msg){
console.log(msg);
}
接下來(lái)，我會(huì)繼續(xù)問(wèn)如果我傳入多個(gè)參數(shù)依舊輸出一個(gè)字符串 ，我會(huì)提示面試者傳入的 參數(shù)是不固定的，我會(huì)暗示xxconsole.log實(shí)際上也接受多個(gè)參數(shù)。
log('hello', 'world');
不過(guò)我還是希望您的面試者現(xiàn)在已經(jīng)想起apply;面試者可能會(huì)在apply和 call上困惑，這個(gè)時(shí)候我會(huì)做點(diǎn)小提示，不過(guò)將console上下文傳入也是非常重要的.
function log(){
console.log.apply(console, arguments);
};
接著我會(huì)繼續(xù)追問(wèn)，如果我希望在那個(gè)輸出的字符串前統(tǒng)一加上(app) 這樣的字符串，類(lèi)似于這樣:
'(app) hello world'
這個(gè)問(wèn)題明顯會(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);
};
Context
接下來(lái)我想了解面試者對(duì)于上下文以及this的理解，我會(huì)給出下邊的代碼，讓面試者去解釋count的值，
資料共享平臺(tái)
《ＨＲ是如何面試那些前端菜鳥(niǎo)的》(http://m.dameics.com)。var User = {
count: 1,
getCount: function() { return this.count;
}
};
接下來(lái)我會(huì)給出下面的代碼，讓面試者去回答應(yīng)該輸出的正確答案。
console.log(User.getCount());var func = User.getCount; console.log(func());
上面的例子中正確輸出1和undefined。實(shí)際上很多面試者都會(huì)在這里跌倒。func的上下文是 `window，因此已經(jīng)失去了count屬性。接下來(lái)我回繼續(xù)追問(wèn)面試者如何確保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);
};
}
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.
一個(gè)彈窗庫(kù)
面試的最后y一部分，我會(huì)要求面試者寫(xiě)點(diǎn)實(shí)際的東西。這個(gè)非常有用，足以了解前端的技術(shù)棧。如果前面的問(wèn)題回答的較為理想，這個(gè)問(wèn)題，我會(huì)非常迅速的展開(kāi)最后一個(gè)問(wèn)題的考察。
雖然最終效果取決于面試者的實(shí)現(xiàn)，但是這里依舊有足夠的考察點(diǎn)。
最好不使用 position:absolute而是position:fixed，這個(gè)時(shí)候即使窗體有滾動(dòng)，也可以很好的遮罩住全局。我會(huì)提示面試者這樣使用，并且追問(wèn)這兩者的區(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ì)定位，而有的面試者則更擅長(zhǎng)使用Js。
.overlay article { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; width: 400px; height: 400px;
}
我會(huì)繼續(xù)問(wèn)，如何確保點(diǎn)擊遮罩層時(shí)遮罩層是關(guān)閉的?這個(gè)問(wèn)題可以將我們的討論落腳到 冒泡中來(lái)。很多面試者都會(huì)直接將點(diǎn)擊實(shí)踐綁定到遮罩層上。
$('.overlay').click(closeOverlay);
這個(gè)接下來(lái)可以工作了，但是你會(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í)際上你還可以問(wèn):性能，HTML5 APIs， AMD vs CommonJS modules，constructors，數(shù)據(jù)類(lèi)型，以及盒子模型。我經(jīng)常都會(huì)隨著面試者的進(jìn)行去選擇相應(yīng)的問(wèn)題
【ＨＲ是如何面試那些前端菜鳥(niǎo)的】相關(guān)文章：
如何面試成功07-25
國(guó)外HR如何面試07-25
小組面試如何應(yīng)對(duì)06-19
小公司如何面試員工12-05
面試時(shí)如何回答頻繁跳槽06-08
IT職場(chǎng)面試如何自我介紹03-13