3 个在 JavaScript 面试前应该知道的问题

在这篇文章中，作者总结了 3 个在 JavaScript 面试问题中问得最多的问题（不清楚国内是不是）。这三个问题不是关于任何库的用法或 ES6 的新功能，而主要是对原生 JavaScript 的理解。

Question #1: 事件代理

当创建一个应用时，不可避免的会遇到监听事件触发的需求。这里有一个小的简单的待办列表要完成，想要在用户点击其中一个列表项时触发一个动作。下面是一段 HTML 代码：

<ul id="todo-app">

你可能会想像下面这样来写：

document.addEventListener('DOMContentLoaded', function() {

当然这样写在技术上是完全可以的，唯一的问题就是当列表项过多的时候（比如 10,000 个），你的这段函数就将会同时创建 10,000 个监听函数。

下面是一种更有效率的写法：

document.addEventListener('DOMContentLoaded', function() {

Question #2: 在循环中使用闭包

闭包是 JavaScript 的一个重要特性，开发者可以用来模拟私有方法。在这里有个简单的问题：

实现一个函数，循环遍历整数列表，并在 3 秒后打印每个元素的索引。

一个常见的错误实现：

const arr = [10, 12, 15, 21];for (var i = 0; i < arr.length; i++) {

如果你执行这段代码，会发现每次输出的是 4 而不是按顺序的 0,1,2,3。

原因在于 setTimeout 创建了一个匿名函数并访问处于外部的变量 i，都处于同一环境中。当 console.log 被调用的时候，匿名函数保持对外部变量 i 的引用，此时 for 循环已经结束， i 的值被修改成了 4。为了得到想要的结果，需要在每次循环中创建变量 i 的拷贝。

事实上正确的写法有好几种，这里列举用得最多的两种：

const arr = [10, 12, 15, 21];for (var i = 0; i < arr.length; i++) {

const arr = [10, 12, 15, 21];for (let i = 0; i < arr.length; i++) {

Question #3: Debouncing

有一些浏览器事件可以在很短的时间内快速启动多次，例如调整窗口大小或滚动页面。如果你在窗口滚动上绑定了事件，那么可能在用户滚动页面的几秒钟里，你的事件方法就执行了数千次，这就会导致很严重的性能问题。

一个真实的案例就是 2011 年 Twitter，在你滚动 Twitter feed 时，其会变得非常慢甚至未响应。这里有一篇 blog 就详细讲了当时的这个 bug，也就是在 scroll 事件上绑定一个复杂函数是多糟的主意。

Debouncing 就是解决这个问题的一种方法，简单来说就是限制函数调用的间隔时间。如果在时间间隔内再次触发事件，就重启定时器并忽略掉这次事件。

// debounce function that will wrap our eventfunction debounce(fn, delay) {

使用：

// function to be called when user scrollsfunction foo() {

与 Debouncing 类似的技术是 Throttling，同样也是使用计时器来控制事件的触发，不同之处在于 Throttling 没有忽略掉事件，而是延迟触发。如果想了解更多，可以进一步阅读下面的这几篇文章。