在IT界，需要大量的 JavaScript 開發者。如果你的能力能夠勝任這一角色，那麼你將獲得許多換工作和提高薪水的機會。但是在你被公司錄取之前，你需要展現你的技術，以便通過面試環節。在這篇文章中，我會為你展示前端面試會被問到的 5 個典型問題及相關解決方法，這 5 個問題常被用來測試面試者的 Ja ...
在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群提問，群里每天還會更新一些學習資源。禁止閑聊，非喜勿進。
