五個典型的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 個典型問題。在實際面試中，真實的問題可能會有所不同，但涉及的概念和涵蓋的話題通常是非常類似的。我希望你覺得前面那些測試很有趣。如果你不知道其中一些答案，也別擔心：隨著不斷學習和經驗積累，你就能解決那些問題。

　　如果你在面試中被問到了其他有趣的問題，不要猶豫，馬上來和我們分享吧。這會幫助到很多的開發者。