5個典型的JavaScript訪談練習

核心要點

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

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

問題1：作用域

考慮以下代碼：

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

console.log(b);

控制台將打印什麼？

答案

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

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

console.log(b);

問題2：創建“原生”方法

在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 */};

當要求你模擬一個JavaScript函數時，這種技術特別有用。

問題3：提升

執行這段代碼的結果是什麼？為什麼？

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

console.log(b);

答案

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

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

console.log(b);

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

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

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

答案

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

問題5：call()和apply()

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

答案

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

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

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

   return str;
};

結論

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

關於JavaScript面試練習的常見問題解答 (FAQ)

在JavaScript編碼面試中，應該避免哪些常見錯誤？

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

如何準備JavaScript編碼面試？

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

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

JavaScript中的閉包是能夠訪問父作用域的函數，即使父函數已經關閉。它們很重要，因為它們能夠實現數據隱私，並且用於函數工廠和模塊模式。理解閉包至關重要，因為它們是JavaScript的基礎部分。

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

JavaScript中的“this”是一個特殊的關鍵字，它指的是調用函數的上下文。它的值取決於函數的調用方式。它可以指全局對象、當前正在由函數處理的對象、由構造函數創建的對象，或者使用call、apply或bind方法時指定的對象。

JavaScript如何處理異步操作？

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

什麼是JavaScript中的原型？

JavaScript中的原型是JavaScript對象相互繼承特性的機制。 JavaScript通常被稱為基於原型的語言，理解原型是理解JavaScript的關鍵。

你能解釋JavaScript中“==”和“===”的區別嗎？

“==”是鬆散相等運算符，它在進行比較之前將操作數轉換為相同的類型。 “===”是嚴格相等運算符，它不進行類型轉換，它按原樣比較操作數。

什麼是JavaScript中的事件循環？

事件循環是JavaScript中的一種機制，它不斷檢查調用堆棧是否為空。如果是，它從任務隊列中獲取第一個任務並將其推送到調用堆棧。它允許JavaScript成為非阻塞的並處理異步操作。

什麼是JavaScript Promise？

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

一些常見的JavaScript設計模式是什麼？

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

以上是5個典型的JavaScript訪談練習的詳細內容。更多資訊請關注PHP中文網其他相關文章！