核心要點(diǎn)

• 常見的JavaScript面試題通常圍繞理解關(guān)鍵概念展開，例如作用域、創(chuàng)建原生方法、提升、this關(guān)鍵字以及call()和apply()函數(shù)。
• 在JavaScript中，理解函數(shù)的上下文以及如何調(diào)用函數(shù)至關(guān)重要。 this關(guān)鍵字指的是上下文，它會(huì)根據(jù)函數(shù)是作為對(duì)象的一部分被調(diào)用還是作為獨(dú)立函數(shù)被調(diào)用而有所不同。
• JavaScript中的提升是指變量和函數(shù)被移動(dòng)到其包含作用域頂部的過程。然而，雖然函數(shù)保留其初始值，但變量不會(huì)，並且最初被設(shè)置為undefined。

JavaScript開發(fā)人員在IT領(lǐng)域非常搶手。如果這個(gè)角色最能體現(xiàn)你的知識(shí)，你有很多機(jī)會(huì)改變你的工作公司並提高你的薪水。但在你被公司錄用之前，你必須展示你的技能才能通過面試過程。在本文中，我將向你展示五個(gè)在前端工作面試中常見的測(cè)試候選人JavaScript技能及其相關(guān)解決方案的問題。這將會(huì)很有趣！

問題1：作用域

考慮以下代碼：

(function() {
   var a = b = 5;
})();

console.log(b);

控制臺(tái)將打印什麼？

答案

上面的代碼打印5。這個(gè)問題的技巧在於，在立即執(zhí)行函數(shù)表達(dá)式(IIFE)中，有兩個(gè)賦值語句，但是變量a是用關(guān)鍵字var聲明的。這意味著a是函數(shù)的局部變量。相反，b被賦值到全局作用域。這個(gè)問題的另一個(gè)技巧是它沒有在函數(shù)內(nèi)部使用嚴(yán)格模式（'use strict';）。如果啟用了嚴(yán)格模式，代碼將引發(fā)錯(cuò)誤“Uncaught ReferenceError: b is not defined”。記住，嚴(yán)格模式要求你顯式地引用全局作用域，如果這是預(yù)期的行為。因此，你應(yīng)該這樣寫：

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

console.log(b);

問題2：創(chuàng)建“原生”方法

在String對(duì)像上定義一個(gè)repeatify函數(shù)。該函數(shù)接受一個(gè)整數(shù)，指定字符串需要重複的次數(shù)。該函數(shù)返回重複指定次數(shù)的字符串。例如：

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

應(yīng)該打印hellohellohello。

答案

一個(gè)可能的實(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屬性的了解。它還驗(yàn)證開發(fā)人員是否能夠擴(kuò)展原生數(shù)據(jù)類型的功能（儘管不應(yīng)該這樣做）。這裡另一個(gè)重要的點(diǎn)是證明你了解如何避免覆蓋可能已經(jīng)定義的函數(shù)。這是通過測(cè)試在定義你自己的函數(shù)之前該函數(shù)是否不存在來完成的：

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

當(dāng)要求你模擬一個(gè)JavaScript函數(shù)時(shí)，這種技術(shù)特別有用。

問題3：提升

執(zhí)行這段代碼的結(jié)果是什麼？為什麼？

(function() {
   var a = b = 5;
})();

console.log(b);

答案

這段代碼的結(jié)果是undefined和2。原因是變量和函數(shù)都被提升（移動(dòng)到函數(shù)的頂部），但是變量不保留任何賦值的值。因此，在打印變量a時(shí)，它存在於函數(shù)中（它已聲明），但它仍然是undefined。換句話說，上面的代碼等效於以下代碼：

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

console.log(b);

問題4：this在JavaScript中的工作方式

以下代碼的結(jié)果是什麼？解釋你的答案。

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

答案

代碼打印Aurelio De Rosa和John Doe。原因是函數(shù)的上下文（this關(guān)鍵字指的是什麼）在JavaScript中取決於函數(shù)的調(diào)用方式，而不是定義方式。在第一個(gè)console.log()調(diào)用中，getFullname()被調(diào)用為obj.prop對(duì)象的函數(shù)。因此，上下文指的是後者，函數(shù)返回該對(duì)象的fullname屬性。相反，當(dāng)getFullname()被賦值給test變量時(shí)，上下文指的是全局對(duì)象（window）。發(fā)生這種情況是因?yàn)?code>test被隱式地設(shè)置為全局對(duì)象的屬性。因此，函數(shù)返回window名為fullname的屬性的值，在本例中是代碼在代碼片段的第一行設(shè)置的值。

問題5：call()和apply()

修復(fù)上一個(gè)問題的錯(cuò)誤，以便最後一個(gè)console.log()打印Aurelio De Rosa。

答案

可以使用call()或apply()函數(shù)強(qiáng)制函數(shù)的上下文來修復(fù)此問題。如果你不了解它們以及它們的區(qū)別，我建議你閱讀文章《function.call和function.apply的區(qū)別》。在下面的代碼中，我將使用call()，但在這種情況下，apply()也會(huì)產(chǎn)生相同的結(jié)果：

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
       str += this;
   }

   return str;
};

結(jié)論

在本文中，我們討論了面試中用來測(cè)試JavaScript開發(fā)人員的五個(gè)常見問題。實(shí)際問題可能因面試而異，但涵蓋的概念和主題通常非常相似。我希望你玩得開心，測(cè)試你的知識(shí)。如果你在面試中被問到其他有趣的問題，請(qǐng)隨時(shí)與我們分享。這將幫助很多開發(fā)人員。

關(guān)於JavaScript面試練習(xí)的常見問題解答 (FAQ)

在JavaScript編碼面試中，應(yīng)該避免哪些常見錯(cuò)誤？

最常見的錯(cuò)誤之一是在開始編碼之前沒有完全理解問題。花時(shí)間理解問題，如果需要，提出澄清問題。另一個(gè)錯(cuò)誤是沒有考慮邊緣情況。始終考慮潛在的邊緣情況以及你的代碼將如何處理它們。此外，避免硬編碼值。你的解決方案應(yīng)該適用於所有輸入，而不僅僅是提供的示例。最後，記住要溝通你的思考過程。面試官對(duì)你的解決問題的方法感興趣，而不僅僅是最終的解決方案。

如何準(zhǔn)備JavaScript編碼面試？

首先要徹底理解JavaScript的基礎(chǔ)知識(shí)。這包括理解閉包、Promise、async/await和ES6特性等概念。在LeetCode、HackerRank和Codewars等平臺(tái)上練習(xí)編碼問題。此外，閱讀常見的JavaScript面試問題，並嘗試自己解決它們。最後，了解JavaScript的底層工作原理。這包括理解事件循環(huán)、調(diào)用堆棧和JavaScript的非阻塞特性。

什麼是JavaScript中的閉包，為什麼它們很重要？

JavaScript中的閉包是能夠訪問父作用域的函數(shù)，即使父函數(shù)已經(jīng)關(guān)閉。它們很重要，因?yàn)樗鼈兡軌驅(qū)崿F(xiàn)數(shù)據(jù)隱私，並且用於函數(shù)工廠和模塊模式。理解閉包至關(guān)重要，因?yàn)樗鼈兪荍avaScript的基礎(chǔ)部分。

你能解釋JavaScript中“this”的概念嗎？

JavaScript中的“this”是一個(gè)特殊的關(guān)鍵字，它指的是調(diào)用函數(shù)的上下文。它的值取決於函數(shù)的調(diào)用方式。它可以指全局對(duì)象、當(dāng)前正在由函數(shù)處理的對(duì)象、由構(gòu)造函數(shù)創(chuàng)建的對(duì)象，或者使用call、apply或bind方法時(shí)指定的對(duì)象。

JavaScript如何處理異步操作？

JavaScript使用回調(diào)、Promise和async/await來處理異步操作?；卣{(diào)是作為參數(shù)傳遞給其他函數(shù)並在某些操作完成後調(diào)用的函數(shù)。 Promise是表示異步操作最終完成或失敗的對(duì)象。 async/await是Promise的語法糖，它使異步代碼看起來和行為都像同步代碼。

什麼是JavaScript中的原型？

JavaScript中的原型是JavaScript對(duì)象相互繼承特性的機(jī)制。 JavaScript通常被稱為基於原型的語言，理解原型是理解JavaScript的關(guān)鍵。

你能解釋JavaScript中“==”和“===”的區(qū)別嗎？

“==”是鬆散相等運(yùn)算符，它在進(jìn)行比較之前將操作數(shù)轉(zhuǎn)換為相同的類型。 “===”是嚴(yán)格相等運(yùn)算符，它不進(jìn)行類型轉(zhuǎn)換，它按原樣比較操作數(shù)。

什麼是JavaScript中的事件循環(huán)？

事件循環(huán)是JavaScript中的一種機(jī)制，它不斷檢查調(diào)用堆棧是否為空。如果是，它從任務(wù)隊(duì)列中獲取第一個(gè)任務(wù)並將其推送到調(diào)用堆棧。它允許JavaScript成為非阻塞的並處理異步操作。

什麼是JavaScript Promise？

JavaScript中的Promise是表示異步操作最終完成或失敗的對(duì)象。它們可以處於三種狀態(tài)之一：等待中、已完成或已拒絕。 Promise用於以比回調(diào)更靈活的方式處理異步操作。

一些常見的JavaScript設(shè)計(jì)模式是什麼？

一些常見的JavaScript設(shè)計(jì)模式包括模塊模式、原型模式、觀察者模式和單例模式。理解這些模式可以幫助你編寫更高效、更易維護(hù)和更可擴(kuò)展的代碼。

以上是5個(gè)典型的JavaScript訪談練習(xí)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！