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

2017-04-07 本文已影响92人极小光

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

Question #1: 事件代理

当创建一个应用时，不可避免的会遇到监听事件触发的需求。这里有一个小的简单的待办列表要完成，想要在用户点击其中一个列表项时触发一个动作。下面是一段 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');
  
  // attach event listener to each item
  for (let item of items) {
    item.addEventListener('click', function() {
      alert('you clicked on item: ' + item.innerHTML);
    });
  }
});

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

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

document.addEventListener('DOMContentLoaded', function() {
  let app = document.getElementById('todo-app');
  
  // attach event listener to whole container
  app.addEventListener('click', function(e) {
    if (e.target && e.target.nodeName === 'LI') {
      let item = e.target;
      alert('you clicked on item: ' + item.innerHTML);
    }
  });
});

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

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

实现一个函数，循环遍历整数列表，并在 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);
}

如果你执行这段代码，会发现每次输出的是 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++) {
  // pass in the variable i so that each function 
  // has access to the correct index
  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++) {
  // using the ES6 let syntax, it creates a new binding
  // every single time the function is called
  // read more here: http://exploringjs.com/es6/ch_variables.html#sec_let-const-loop-heads
  setTimeout(function() {
    console.log('The index of this number is: ' + i);
  }, 3000);
}

Question #3: Debouncing

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

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

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

// debounce function that will wrap our event
function debounce(fn, delay) {
  // maintain a timer
  let timer = null;
  // closure function that has access to timer
  return function() {
    // get the scope and parameters of the function 
    // via 'this' and 'arguments'
    let context = this;
    let args = arguments;
    // if event is called, clear the timer and start over
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}

使用：

// function to be called when user scrolls
function foo() {
  console.log('You are scrolling!');
}

// wrap our function in a debounce to fire once 2 seconds have gone by
let elem = document.getElementById('container');
elem.addEventListener('scroll', debounce(foo, 2000));

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

扩展阅读：

原文：3 JavaScript questions to watch out for during coding interviews
欢迎关注知乎专栏「极光日报」，每天为 Makers 导读三篇优质英文文章。

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

Question #1: 事件代理

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

Question #3: Debouncing

猜你喜欢

热点阅读