轉自實驗樓
作者先後在twitter,Stripe工作，期間會參加面試工作。實際上參加面試工作的人都知道要想在一個較短的時間内（30min-1h）就對一個應聘者做出判斷其實是很難的，是以我們不得不想盡辦法去更加合理的去判斷面試者。下面是作者理出的一個思路:
如果對方有github賬号，我們會盡可能的去了解TA在開源項目上的動态和他的開源項目。我們也會從中挑出一些切入點，通過交流他做這個項目的出發點也能夠更好的了解面試者的設計思路，也可以初步的去判斷該人是不是适合團隊。如果雙方交流順暢，接下來會直接進行到代碼等一些基礎問題上來。
自己的面試會很實際，幾乎全部都是coding,很少會提到算法和一些抽象的概念。自己提出的問題看似簡單，但是每一點都涉及到javascript的一些知識領域。
面試的時候并不建議使用白闆，通常希望面試者自己帶上自己的筆記本，或者就使用自己的。我會将他們的代碼運作，并告知結果。
1.Object prototype
我起初會提出一個非常簡單的問題就是定義一個函數spacify ,将一個字元串作為參數傳入，然後傳回一個字元串，不過該字元串相對原有傳入參數的變化是字母與字母之間多了一個空格。
spacify('hello world') // => 'h e l l o w o r l d'
雖然問題很簡單，但這卻是一個很好的開始，我們接下來的問題便可以圍繞此展開, 尤其對于那些聲稱自己了解Javascript，但實際卻連一個函數都不會寫的面試者高下立判。
正确的答案如下，不過一些面試者或許會選擇for循環，當然這并沒有錯
function spacify(str) { return str.split('').join(' '); }
接下來，我會繼續問如何将這個函數直接作用在一個字元串對象上.
'hello world'.spacify();
這個問題可以讓我了解面試者對原型鍊的了解，這個問題可以讓彼此展開一些有讨論，諸如直接在原型鍊上定義屬性的危害等等.實際期待結果:
String.prototype.spacify = function(){ return this.split('').join(' '); };
一般到這裡我會讓面試者講講函數聲明和函數表達式的差別。
2.Arguments
接下來，我會去了解面試者對于 arguments的了解，我們會要求面試者定一個log函數。
log('hello world');
函數類似實作一個簡單的控制台輸出，在控制台輸出傳入的字元串。一邊面試者都會在定義的函數裡直接寫console.log，不過還是有更優秀的面試者會直接使用apply。
function log(msg){ console.log(msg); }
接下來，我會繼續問如果我傳入多個參數依舊輸出一個字元串 ，我會提示面試者傳入的 參數是不固定的，我會暗示作者console.log實際上也接受多個參數。
log('hello', 'world');
不過我還是希望您的面試者現在已經想起apply;面試者可能會在apply和 call上困惑，這個時候我會做點小提示，不過将console上下文傳入也是非常重要的.
function log(){ console.log.apply(console, arguments); };
接着我會繼續追問，如果我希望在那個輸出的字元串前統一加上(app) 這樣的字元串，類似于這樣:
'(app) hello world'
這個問題明顯會複雜很多，面試者應該知道arguments是一個僞數組，我們需要先将它轉換成正常的數組，我們可以使用Array.prototype.slice,代碼如下:
function log(){ var args = Array.prototype.slice.call(arguments); args.unshift('(app)'); console.log.apply(console, args); };
3.Context
接下來我想了解面試者對于上下文以及this的了解，我會給出下邊的代碼，讓面試者去解釋count的值。
var User = { count: 1, getCount: function() { return this.count; } };
接下來我會給出下面的代碼，讓面試者去回答應該輸出的正确答案。
console.log(User.getCount()); var func = User.getCount; console.log(func());
上面的例子中正确輸出1和undefined。實際上很多面試者都會在這裡跌倒。func的上下文是 ｀window，是以已經失去了count屬性。接下來我回繼續追問面試者如何確定func的上下文始終都和User關聯，這樣可以使輸出的答案是1。
正确答案是使用Function.prototype.bind，代碼如下:
var func = User.getCount.bind(User); console.log(func());
這個時候我會讓面試者去進行完善，如果老的浏覽器并不支援該方法，我們應該怎樣去相容。部分基礎較差的面試者會比較糾結，但是個人認為任何一位前端工程師都應該對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.
4.一個彈窗庫
面試的最後y一部分，我會要求面試者寫點實際的東西。這個非常有用，足以了解前端的技術棧。如果前面的問題回答的較為理想，這個問題，我會非常迅速的展開最後一個問題的考察。
雖然最終效果取決于面試者的實作，但是這裡依舊有足夠的考察點。
最好不使用 position:absolute而是position:fixed，這個時候即使窗體有滾動，也可以很好的遮罩住全局。我會提示面試者這樣使用，并且追問這兩者的差別。
.overlay { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.8); }
如何将裡面的内容居中也是一個非常重要的考察點。一些面試者會使用絕對定位，而有的面試者則更擅長使用Js。
.overlay article { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; width: 400px; height: 400px; }
我會繼續問，如何確定點選遮罩層時遮罩層是關閉的？這個問題可以将我們的讨論落腳到 冒泡中來。很多面試者都會直接将點選實踐綁定到遮罩層上。
$('.overlay').click(closeOverlay);
這個接下來可以工作了，但是你會發現如果點選了遮罩層中的子元素，遮罩層也會關閉。解決方案是便是判斷event target ，并且保證 這個時間不會冒泡。
$('.overlay').click(function(e){ if (e.target == e.currentTarget) closeOverlay(); });
6.尾聲
當然前面的知識點僅僅是前端的一部分，實際上你還可以問:性能，HTML5 APIs， AMD vs CommonJS modules，constructors，資料類型，以及盒子模型。我經常都會随着面試者的進行去選擇相應的問題。
最後推薦大家都可以去看下：
- Front-end-Developer-Interview-Questions（https://github.com/h5bp/Front-end-Developer-Interview-Questions）
- JavaScript Garden.（http://bonsaiden.github.io/JavaScript-Garden/zh/）
轉載自：jackpu.com
文章位址：http://www.jackpu.com/-pian-fei-chang-bu-cuo-de-qian-duan-mian-shi-wen-zhang/
英文原文：http://blog.sourcing.io/interview-questions
![前端面試題：基礎題目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)