前言

本文不是講述最新的JavaScript庫，日常的開發實踐或任何新的 ES6 函數。 相反，在討論JavaScript時，經常會在面試中出現這3個問題。 我自己被問到過這些問題，我的朋友告訴我他們也被到問過。

當然，你在JavaScript面試前不應該只學習這3個問題 – 這里有很多 方法 可以讓你更好地準備即將到來的面試 – 但面試官可能會問到下面是3個問題，來判斷你對JavaScript語言的理解和DOM的掌握程度。

讓我們開始吧！請注意，我們將在下面的示例中使用原生 JavaScript，因為你的面試官通常想看看你在沒有第三方庫（比如jQuery）的幫助下，是如何理解 JavaScript 和 DOM 的。

問題 #1: 事件委托

注：也叫事件委派，時間代理等；

當構建應用程序時，有時你需要將事件監聽器綁定到頁面上的按鈕，文本或圖像上，以便在用戶與元素交互時執行某些操作。

如果我們以一個簡單的待辦事項列表為例，面試官可能會告訴你，他們希望在用戶單擊其中一個列表項時需要執行某些操作。

他們希望你用 JavaScript 實現這個功能，假設HTML代碼如下：

<ul id="todo-app"> <li class="item">Walk the dog</li> <li class="item">Pay bills</li> <li class="item">Make dinner</li> <li class="item">Code for one hour</li></ul>

你可能會想像下面這樣在元素綁定事件監聽器：

document.addEventListener('DOMContentLoaded', function() {  let app = document.getElementById('todo-app'); let items = app.getElementsByClassName('item');  // 將事件偵聽器綁定到每個列表項 for (let item of items) { item.addEventListener('click', function() { alert('you clicked on item: ' + item.innerHTML); }); } });

雖然這個實現了功能，問題是您要單獨將事件偵聽器綁定到每個列表項。這是4個元素，沒什么大問題，但如果有人在他們的待辦事項列表中添加了10,000個事項（他們可能有很多事情要做）怎么辦？然后你的函數將創建 10,000 個獨立的事件監聽器，并將每個事件監聽器綁定到 DOM 。這樣代碼執行的效率非常低下。

在面試中，最好首先詢問面試官用戶可以輸入事項的最大數量是多少。如果它永遠不會超過 10 個，上面的代碼將工作正常。但是，如果用戶可以輸入的事項數量沒有限制，那么你應該使用一個更高效的解決方案。

如果你的應用程序最終可能有幾百個事件監聽器，更高效的解決方案是將一個事件偵聽器實際綁定到整個容器上，然后在實際單擊時可以訪問每個確切元素。這被稱為事件委托，并且它每個元素單獨綁定事件處理程序更高效。

用事件委托的代碼：

document.addEventListener('DOMContentLoaded', function() {  let app = document.getElementById('todo-app');  // 事件偵聽器綁定到整個容器上 app.addEventListener('click', function(e) { if (e.target && e.target.nodeName === 'LI') { let item = e.target; alert('you clicked on item: ' + item.innerHTML); } }); });

問題 #2: 在循環內使用閉包（Closures）

閉包常常在面試中出現，以便面試官衡量你對這門語言的熟悉程度，以及是否知道何時使用閉包。

閉包的本質是一個內部函數訪問其作用域之外的變量。閉包可以用于實現諸如 私有變量 和 創建工廠函數之類的東西。關于使用閉包的常見面試問題是這樣的：

編寫一個函數，它將循環遍歷整數列表，并在3秒延遲后打印每個元素的索引。

我看到這個問題的最常見（但是不正確）是像下面這樣的實現：

const arr = [10, 12, 15, 21];for (var i = 0; i < arr.length; i++) { setTimeout(function() { console.log('The index of this number is: ' + i); }, 3000);}

如果運行上面代碼，3秒延遲后你會看到，實際上每次打印輸出是4，而不是期望的0，1，2，3 。

為了正確理解為什么會發生這種情況，在JavaScript中很有用，這正是面試官真正的意圖。

其原因是因為 setTimeout 函數創建了一個可以訪問其外部作用域的函數（也就是我們經常說的閉包）,每個循環都包含了索引i。
3秒后，該函數被執行并且打印出i的值，其在循環結束時為4，因為它的循環周期經歷了0,1,2,3,4，并且循環最終在4時停止。

實際有幾種 正確的寫法來解決這個問題，下面列舉兩種：

const arr = [10, 12, 15, 21];for (var i = 0; i < arr.length; i++) { // 通過傳遞變量 i // 在每個函數中都可以獲取到正確的索引 setTimeout(function(i_local) { return function() { console.log('The index of this number is: ' + i_local); } }(i), 3000);}

const arr = [10, 12, 15, 21];for (let i = 0; i < arr.length; i++) { // 使用ES6的let語法，它會創建一個新的綁定 // 每個方法都是被單獨調用的 // 更多詳細信息請閱讀: http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads setTimeout(function() { console.log('The index of this number is: ' + i); }, 3000);}

問題 #3: 函數防抖動（Debouncing）

有一些瀏覽器事件可以在很短的時間內快速啟動多次，例如調整窗口大小或向下滾動頁面。例如，如果將事件偵聽器綁定到窗口滾動事件上，并且用戶繼續非常快速地向下滾動頁面，你的事件可能會在3秒的范圍內被觸發數千次。這可能會導致一些嚴重的性能問題。

如果你在面試中討論構建應用程序和事件，如滾動，窗口調整大小，或鍵盤按下的事件時，請務必提及 函數防抖動(Debouncing) 和/或 函數節流（Throttling）來提升頁面速度和性能。一個真實的案例，來自 guest post on css-tricks:

在2011年，一個問題在Twitter上被提出：當你滾動Twitter feed時，它會會變得非常慢甚至未響應。John Resig 就這個問題發布了一篇博文，它解釋了直接綁定函數到scroll事件上是多么糟糕的事。

函數防抖動(Debouncing) 是解決這個問題的一種方式，通過限制需要經過的時間，直到再次調用函數。一個正確實現函數防抖的方法是：把多個函數放在一個函數里調用，隔一定時間執行一次。這里有一個使用原生JavaScript實現的例子，用到了作用域、閉包、this和定時事件：

// debounce函數用來包裹我們的事件function debounce(fn, delay) { // 持久化一個定時器 timer let timer = null; // 閉包函數可以訪問 timer return function() { // 通過 'this' 和 'arguments' // 獲得函數的作用域和參數 let context = this; let args = arguments; // 如果事件被觸發，清除 timer 并重新開始計時 clearTimeout(timer); timer = setTimeout(function() { fn.apply(context, args); }, delay); }}

當這個函數綁定在一個事件上，只有經過一段指定的時間后才會被調用。

你可以像這樣去使用這個函數：

// 當用戶滾動時函數會被調用function foo() { console.log('You are scrolling!');} // 在事件觸發的兩秒后，我們包裹在debounce中的函數才會被觸發let elem = document.getElementById('container');elem.addEventListener('scroll', debounce(foo, 2000));

函數節流是另一個類似函數防抖的技巧，除了使用等待一段時間再調用函數的方法，函數節流還限制固定時間內只能調用一次。所以一個事件如果在100毫秒內發生10次，函數節流會每2秒調用一次函數，而不是100毫秒內全部調用。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對VeVb武林網的支持。