轉(zhuǎn)載自：http://www.jackpu.com/-pian-fei-chang-bu-cuo-de-qian-duan-mian-shi-wen-zhang/

原文地址：http://blog.sourcing.io/interview-questions

文章來(lái)自翻譯朵你，其中忽略了一些無(wú)關(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在開(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ì)于那些聲稱自己了解Javascript，但實(shí)際卻連一個(gè)函數(shù)都不會(huì)寫(xiě)的面試者高下立判性穿。

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

functionspacify(str){returnstr.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(){returnthis.split('').join(' ');};

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

Arguments

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

log('hello world');

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

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

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

log('hello','world');

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

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

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

'(app) hello world'

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

functionlog(){varargs =Array.prototype.slice.call(arguments);? args.unshift('(app)');console.log.apply(console, args);};

Context

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

varUser = {? ? count:1,? getCount:function(){returnthis.count;? }};

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

console.log(User.getCount());varfunc = 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，代碼如下:

varfunc = 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){varself =this;returnfunction(){returnself.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。

.overlayarticle{position: absolute;left:50%;top:50%;margin: -200px00-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ù)類型粱甫，以及盒子模型。我經(jīng)常都會(huì)隨著面試者的進(jìn)行去選擇相應(yīng)的問(wèn)題作瞄。