JavaScript中最常見的三個面試題解析

前言

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

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

讓我們開始吧！請注意，我們將在下面的示例中使用原生 JavaScript，因?yàn)槟愕拿嬖嚬偻ǔＯ肟纯茨阍跊]有第三方庫（比如jQuery）的幫助下，是如何理解 JavaScript 和 DOM 的。

問題 #1: 事件委托

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

當(dāng)構(gòu)建應(yīng)用程序時，有時你需要將事件監(jiān)聽器綁定到頁面上的按鈕，文本或圖像上，以便在用戶與元素交互時執(zhí)行某些操作。

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

他們希望你用 JavaScript 實(shí)現(xiàn)這個功能，假設(shè)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>

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

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

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

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

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

用事件委托的代碼：

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: 在循環(huán)內(nèi)使用閉包（Closures）

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

閉包的本質(zhì)是一個內(nèi)部函數(shù)訪問其作用域之外的變量。閉包可以用于實(shí)現(xiàn)諸如 私有變量 和 創(chuàng)建工廠函數(shù)之類的東西。關(guān)于使用閉包的常見面試問題是這樣的：

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

我看到這個問題的最常見（但是不正確）是像下面這樣的實(shí)現(xiàn)：

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);
}

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

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

其原因是因?yàn)?setTimeout 函數(shù)創(chuàng)建了一個可以訪問其外部作用域的函數(shù)（也就是我們經(jīng)常說的閉包）,每個循環(huán)都包含了索引i。
3秒后，該函數(shù)被執(zhí)行并且打印出i的值，其在循環(huán)結(jié)束時為4，因?yàn)樗难h(huán)周期經(jīng)歷了0,1,2,3,4，并且循環(huán)最終在4時停止。

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

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
 // 通過傳遞變量 i
 // 在每個函數(shù)中都可以獲取到正確的索引
 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語法，它會創(chuàng)建一個新的綁定
 // 每個方法都是被單獨(dú)調(diào)用的
 // 更多詳細(xì)信息請閱讀: 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: 函數(shù)防抖動（Debouncing）

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

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

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

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

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

當(dāng)這個函數(shù)綁定在一個事件上，只有經(jīng)過一段指定的時間后才會被調(diào)用。

你可以像這樣去使用這個函數(shù)：

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。