在IT界，需要大量的 JAVAScript 開發(fā)者。如果你的能力能夠勝任這一角色，那么你將獲得許多換工作和提高薪水的機(jī)會(huì)。但是在你被公司錄取之前，你需要展現(xiàn)你的技術(shù)，以便通過面試環(huán)節(jié)。在這篇文章中，我會(huì)為你展示前端面試會(huì)被問到的 5 個(gè)典型問題及相關(guān)解決方法，這 5 個(gè)問題常被用來測(cè)試面試者的 JavaScript 技能。它們很有意思！

問題1: 范圍（Scope）

思考以下代碼：

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

控制臺(tái)（console）會(huì)打印出什么？

答案

上述代碼會(huì)打印出5。

這個(gè)問題的陷阱就是，在立即執(zhí)行函數(shù)表達(dá)式（IIFE）中，有兩個(gè)命名，但是其中變量是通過關(guān)鍵詞var來聲明的。這就意味著a是這個(gè)函數(shù)的局部變量。與此相反，b是在全局作用域下的。

這個(gè)問題另一個(gè)陷阱就是，在函數(shù)中他沒有使用"嚴(yán)格模式" ('use strict';)。如果嚴(yán)格模式開啟，那么代碼就會(huì)報(bào)出未捕獲引用錯(cuò)誤（Uncaught ReferenceError）：b沒有定義。記住，嚴(yán)格模式要求你在需要使用全局變量時(shí)，明確地引用該變量。因此，你需要像下面這么寫：

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

問題2: 創(chuàng)建 “原生（native）” 方法

在String對(duì)象上定義一個(gè)repeatify函數(shù)。這個(gè)函數(shù)接受一個(gè)整數(shù)參數(shù)，來明確字符串需要重復(fù)幾次。這個(gè)函數(shù)要求字符串重復(fù)指定的次數(shù)。舉個(gè)例子：

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

應(yīng)該打印出hellohellohello.

答案

一種可能的實(shí)現(xiàn)如下所示：

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

這個(gè)問題測(cè)試了開發(fā)人員對(duì)于javascript中繼承的掌握，以及prototype這個(gè)屬性。這也驗(yàn)證了開發(fā)人員是否有能力擴(kuò)展原生數(shù)據(jù)類型的功能（雖然不應(yīng)該這么做）。

這個(gè)問題的另一個(gè)重點(diǎn)是驗(yàn)證你是否意識(shí)到并知道如何避免覆蓋已經(jīng)存在的函數(shù)。這可以通過在自定義函數(shù)之前判斷該函數(shù)是否存在來做到。

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

當(dāng)你需要為舊瀏覽器實(shí)現(xiàn)向后兼容的函數(shù)時(shí)，這一技巧十分有用。

問題3: 變量提升（Hoisting）

執(zhí)行以下代碼會(huì)有什么結(jié)果？為什么？

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

答案

這段代碼的執(zhí)行結(jié)果是undefined 和 2。

這個(gè)結(jié)果的原因是，變量和函數(shù)都被提升了（hoisted）。因此，在a被打印的時(shí)候，它已經(jīng)在函數(shù)作用域中存在（即它已經(jīng)被聲明了），但是它的值依然是 undefined。換言之，上述代碼和以下代碼是等價(jià)的。

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

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

以下代碼的結(jié)果是什么？請(qǐng)解釋你的答案。

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 中，一個(gè)函數(shù)的上下文環(huán)境，也就是this關(guān)鍵詞所引用對(duì)象，是依賴于函數(shù)是如何被調(diào)用的，而不是依賴于函數(shù)如何b被定義的。

在第一個(gè)console.log()調(diào)用中， getFullname()是作為obj.prop的函數(shù)被調(diào)用的。因此，這里的上下文環(huán)境指向后者并且函數(shù)返回this對(duì)象的 fullname屬性。相反，當(dāng) getFullname() 被賦為test變量的值時(shí)，那個(gè)語境指向全局對(duì)象(window)。這是因?yàn)?，test被隱式設(shè)置為全局對(duì)象的屬性。因此，函數(shù)調(diào)用返回window的fullname屬性值，在此段代碼中，這個(gè)值是通過第一行賦值語句設(shè)置的。

問題5: call() 和 Apply()

修復(fù)上一個(gè)問題，讓最后一個(gè)console.log()打印出 Aurelio De Rosa。

答案

要解決這個(gè)問題，可以通過為函數(shù)call()或者apply()強(qiáng)制函數(shù)調(diào)用的上下文環(huán)境。如果你不知道call()和apply()之間的區(qū)別，我推薦閱讀文章function.call和function.apply之間有和區(qū)別?。在以下代碼中，我會(huì)用call()，但是在這里，用apply()也可以獲得相同的結(jié)果：

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

結(jié)論

在這篇文章中，我們討論了 JavaScript 面試者在面試中常被問到的 5 個(gè)典型問題。在實(shí)際面試中，真實(shí)的問題可能會(huì)有所不同，但涉及的概念和涵蓋的話題通常是非常類似的。我希望你覺得前面那些測(cè)試很有趣。如果你不知道其中一些答案，也別擔(dān)心：隨著不斷學(xué)習(xí)和經(jīng)驗(yàn)積累，你就能解決那些問題。

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

原文：https://www.sitepoint.com/5-typical-javascript-interview-exercises/譯者：cherryvenus譯文：http://www.zcfy.cc/article/5-typical-javascript-interview-exercises-1960.html