前端面试题---闭包和事件委托

一.什么是闭包？如何创建闭包？闭包有什么特性和用途？

闭包（Closure）是指在函数内部创建并返回另一个函数的能力，而返回的函数可以访问其创建时所处的语法环境（包括变量、函数等）。简而言之，闭包是由函数及其相关引用环境组合而成的包裹体。

创建闭包的常见方式是在一个函数内部定义一个函数，并将内部函数作为结果返回。

function outerFunction() {
  var outerValue = "I'm outside!";

  function innerFunction() {
    console.log(outerValue);
  }

  return innerFunction;
}

var closure = outerFunction();  // 创建闭包
closure();  // 输出 "I'm outside!"

闭包具有以下特性和用途：

1. 记忆状态：闭包允许内部函数捕获和访问外部函数的变量和参数，即使外部函数已经执行完毕，内部函数仍然可以访问它们。这使得闭包可以用于创建具有持久状态的函数，例如计数器或缓存函数。

2. 封装和私有性：由于闭包可以访问外部函数的变量，因此可以使用闭包来实现封装和私有性。外部函数中的变量对外部不可见，只有内部函数可以访问它们，从而实现了信息隐藏和保护。

3. 延迟执行：闭包可以延迟执行内部函数，以便在稍后的时间点调用。这对于处理异步操作、事件处理程序等非常有用。

需要注意的是，闭包可能会导致内存泄漏问题，因为闭包中的变量引用会一直存在，即使外部函数已经执行完毕。因此，在使用闭包时应谨慎，确保正确管理内存和资源。

二.JavaScript 中的事件委托是什么？为什么使用事件委托？

事件委托（Event delegation）是一种利用事件冒泡的特性，将事件处理程序绑定到它们共同的父元素上，从而代理处理子元素的事件。

使用事件委托的原理是当一个事件被触发时，事件会在DOM树上向上冒泡，逐级触发祖先元素的相同事件。通过将事件处理程序绑定到父元素上，可以利用事件冒泡来捕获子元素上的事件，并在父元素中处理。

事件委托的好处包括：

1. 简化事件处理：通过将事件处理程序绑定到父元素上，可以避免为每个子元素都添加事件处理程序。这样可以减少代码量并简化事件管理。

2. 动态添加/删除元素：当动态地向DOM中添加或删除元素时，无需重新绑定事件处理程序。因为事件委托是基于父元素的，新添加的子元素也会继承相同的事件处理行为。

3. 节省内存：当有大量的子元素时，为每个子元素都绑定事件处理程序会占用大量内存。使用事件委托可以减少内存消耗，只需要一个事件处理程序即可。

4. 处理动态内容：当需要处理通过异步加载或动态生成的内容时，事件委托非常有用。因为事件处理程序绑定在父元素上，所以无论何时新的子元素出现，它们都会自动具有相同的事件行为。

总之，事件委托可以提高代码的效率和可维护性，减少内存消耗，并方便地处理动态内容。它特别适用于需要处理大量相似子元素事件的情况，例如列表、表格、菜单等。

简单的例子:

假设有一个 <ul> 元素包含多个 <li> 元素，我们希望在点击每个 <li> 元素时触发相应的事件处理。使用事件委托，我们可以将事件处理程序绑定到 <ul> 元素上，而不是为每个 <li> 元素单独绑定事件处理程序。

//HTML
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

//JavaScript
var myList = document.getElementById("myList");
myList.addEventListener("click", function(event) {
  //event为每一项li的数据
  var target = event.target;
  if (target.tagName === "LI") {
    console.log("点击的项是:", target.textContent);
  }
});

事件冒泡（Event bubbling）

是指当一个元素上的事件被触发时，事件会从最内层的元素开始逐级向上冒泡到父元素，直至根元素。这意味着触发一个事件后，该事件会在元素层次结构中向上传播，依次触发父元素的相同事件。