5個典型的JavaScript面試題

在IT界，須要大量的 JavaScript 開發者。若是你的能力可以勝任這一角色，那麼你將得到許多換工做和提升薪水的機會。可是在你被公司錄取以前，你須要展示你的技術，以便經過面試環節。在這篇文章中，我會爲你展現前端面試會被問到的 5 個典型問題及相關解決方法，這 5 個問題常被用來測試面試者的 JavaScript 技能。它們頗有意思！

問題1: 範圍（Scope）

思考如下代碼：

(function() { var a = b = 5; })(); console.log(b); 

控制檯（console）會打印出什麼？

答案

上述代碼會打印出5。

這個問題的陷阱就是，在當即執行函數表達式（IIFE）中，有兩個命名，可是其中變量是經過關鍵詞var來聲明的。這就意味着a是這個函數的局部變量。與此相反，b是在全局做用域下的。

這個問題另外一個陷阱就是，在函數中他沒有使用"嚴格模式" ('use strict';)。若是嚴格模式開啓，那麼代碼就會報出未捕獲引用錯誤（Uncaught ReferenceError）：b沒有定義。記住，嚴格模式要求你在須要使用全局變量時，明確地引用該變量。所以，你須要像下面這麼寫：

(function() {  'use strict'; var a = window.b = 5; })(); console.log(b); 

問題2: 建立 「原生（native）」 方法

在String對象上定義一個repeatify函數。這個函數接受一個整數參數，來明確字符串須要重複幾回。這個函數要求字符串重複指定的次數。舉個例子：

console.log('hello'.repeatify(3)); 

應該打印出hellohellohello.

答案

一種可能的實現以下所示：

String.prototype.repeatify = String.prototype.repeatify || function(times) { var str = ''; for (var i = 0; i < times; i++) { str += this; } return str; }; 

這個問題測試了開發人員對於javascript中繼承的掌握，以及prototype這個屬性。這也驗證了開發人員是否有能力擴展原生數據類型的功能（雖然不該該這麼作）。

這個問題的另外一個重點是驗證你是否意識到並知道如何避免覆蓋已經存在的函數。這能夠經過在自定義函數以前判斷該函數是否存在來作到。

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */}; 

當你須要爲舊瀏覽器實現向後兼容的函數時，這一技巧十分有用。

問題3: 變量提高（Hoisting）

執行如下代碼會有什麼結果？爲何？

function test() { console.log(a); console.log(foo()); var a = 1; function foo() { return 2; } } test(); 

答案

這段代碼的執行結果是undefined和2。

這個結果的緣由是，變量和函數都被提高了（hoisted）。所以，在a被打印的時候，它已經在函數做用域中存在（即它已經被聲明瞭），可是它的值依然是 undefined。換言之，上述代碼和如下代碼是等價的。

function test() { var a; function foo() { return 2; } console.log(a); console.log(foo()); a = 1; } test(); 

問題4: this在javascript中是如何工做的

如下代碼的結果是什麼？請解釋你的答案。

var fullname = 'John Doe'; var obj = { fullname: 'Colin Ihrig', prop: { fullname: 'Aurelio De Rosa', getFullname: function() { return this.fullname; } } }; console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test()); 

答案

上面的代碼打印出Aurelio De Rosa和John Doe。緣由是在 JavaScript 中，一個函數的上下文環境，也就是this關鍵詞所引用對象，是依賴於函數是如何被調用的，而不是依賴於函數如何b被定義的。

在第一個console.log()調用中，getFullname()是做爲obj.prop的函數被調用的。所以，這裏的上下文環境指向後者而且函數返回this對象的fullname屬性。相反，當getFullname()被賦爲test變量的值時，那個語境指向全局對象(window)。這是由於，test被隱式設置爲全局對象的屬性。所以，函數調用返回window的fullname屬性值，在此段代碼中，這個值是經過第一行賦值語句設置的。

問題5: call()和 apply()

修復上一個問題，讓最後一個console.log()打印出Aurelio De Rosa。

答案

要解決這個問題，能夠經過爲函數call()或者apply()強制函數調用的上下文環境。若是你不知道call()和apply()之間的區別，我推薦閱讀文章function.call和function.apply之間有和區別?。在如下代碼中，我會用call()，可是在這裏，用apply()也能夠得到相同的結果：

console.log(test.call(obj.prop)); 

結論

---

在這篇文章中，咱們討論了 JavaScript 面試者在面試中常被問到的 5 個典型問題。在實際面試中，真實的問題可能會有所不一樣，但涉及的概念和涵蓋的話題一般是很是相似的。我但願你以爲前面那些測試頗有趣。若是你不知道其中一些答案，也別擔憂：隨着不斷學習和經驗積累，你就能解決那些問題。

若是你在面試中被問到了其餘有趣的問題，不要猶豫，立刻來和咱們分享吧。這會幫助到不少的開發者。

我有一個前端學習交流QQ羣：328058344 若是你在學習前端的過程當中遇到什麼問題，歡迎來個人QQ羣提問，羣裏天天還會更新一些學習資源。禁止閒聊，非喜勿進。