JavaScript是所有現代瀏覽器 的官方語言。因此，各種語言的開發者面試中都會遇到 JavaScript 問題。
本文不講最新的 JavaScript 函式庫，通用開發實踐，或任何新的 ES6 函數 。而是講講 3 個面試中常出現的 JavaScript 問題。我問過這些問題，我的朋友說他們也問。
當然不是說你在準備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: 在循環中使用閉包
面試中經常會問到閉包，因為面試官可以通過這個問題的回答判斷你對語言的熟悉程度，以及檢視你是否知道什麼時候使用閉包。
閉包就是能存取作用域外部變數的 內部函數 。閉包能用來實現 私有化 和創建 工廠函數 等作用。關於閉包的常見面試題是這樣的：
寫一個函數，循環一個整數數組，延遲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 的值，而此時循環也結束了， 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，作為提高頁面速度與性能的方法。來一個 css-tricks 的實例：
2011 年，Twitter 出了一個問題：當滾動 Twitter 摘要時，頁面變的很卡甚至沒有回應。 John Resig 寫了 一篇關於這個問題的部落格 ，解釋了直接將耗時的函數綁定在 scroll 事件上是一個多麼糟糕的想法。
Debouncing 是解决这个问题的一种方法，它的做法是限制下次函数调用之前必须等待的时间间隔。正确实现 debouncing 的方法是将若干个函数调用 合成 一次，并在给定时间过去之后仅被调用一次。下面是一个原生 JavaScript 的实现，用到了 作用域 , 闭包, this , 和 计时事件 ：
// 将会包装事件的 debounce 函数
function debounce(fn, delay) {
// 维护一个 timer
let timer = null;
// 能访问 timer 的闭包
return function() {
// 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
let context = this;
let args = arguments;
// 如果事件被调用，清除 timer 然后重新设置 timer
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
}
}登入後複製
这个函数 — 当传入一个事件（fn）时 — 会在经过给定的时间（delay）后执行。
函数这样用：
// 当用户滚动时被调用的函数
function foo() {
console.log('You are scrolling!');
}
// 在 debounce 中包装我们的函数，过 2 秒触发一次
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));登入後複製
Throttling 是与 debouncing 类似的一种技术，但它不是在调用函数之前等待一段时间，throttling 是在较长的时间间隔内调用函数。所以如果一个事件每 100 毫秒被触发 10 次，throttling 会在每隔 2 秒时执行一次这个函数，而不是在 100 毫秒内执行 10 次事件。
以上是3 個 JavaScript面試需要注意的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
