JS实战：闭包与事件委托的阻止冒泡解析

"JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“" 在JavaScript中，闭包是一种强大的特性，它允许函数访问并操作其外部作用域内的变量，即使在其外部作用域已经结束的情况下。闭包通常用于实现数据封装、模块化或者在异步操作中保留状态。在提供的代码示例中，我们看到一个函数`a`内部定义了另一个函数`b`，`b`能够访问`a`的作用域内的变量`i`。当`a`被调用并返回`b`时，`b`仍然保持着对`a`作用域的引用，形成了闭包。即使`a`执行完毕，`i`的值也不会丢失，因为`b`仍然可以访问它。 在JavaScript的作用域链中，每个函数都有自己的作用域链，它是由当前执行环境（即活动对象）加上其父级函数的活动对象构成的。当`a`执行时，`a`的活动对象被创建并放置在作用域链的顶端，使得`b`能够访问`a`的作用域内的`i`。 然而，如果在循环中创建闭包，如同事的代码所示，会出现问题。由于闭包共享相同的外部作用域，每个`getXXX`和`setXXX`函数都引用了同一个`k`变量，而不是各自循环中的`k`值。解决这个问题的方法是通过立即执行函数表达式（IIFE）为每个循环创建独立的作用域： ```javascript var User = function(opts) { var scope = this; for (var key in opts) { (function(k) { scope['get' + k] = function() { return opts[k]; }; scope['set' + k] = function(v) { return opts[k] = v; }; })(key); // 立即执行，传入当前的key } }; ``` 这样，每次循环都会创建一个新的作用域，每个`getXXX`和`setXXX`函数都有其独立的`k`值，从而避免了问题。 另一方面，事件委托是JavaScript中处理大量动态元素的一个有效策略。当需要为多个相似元素添加事件监听器时，通常会选择事件委托。基本思想是在共同的父元素上设置一个事件监听器，然后在事件冒泡过程中处理子元素的事件。事件冒泡是指事件从最深的节点向上逐层传播到根节点。 阻止冒泡是指在事件处理函数中阻止事件继续向父元素传播。在JavaScript中，可以通过`event.stopPropagation()`方法来实现。例如： ```javascript document.getElementById('parent').addEventListener('click', function(event) { if (event.target.matches('.child')) { event.stopPropagation(); // 阻止事件冒泡到父元素 // 处理子元素点击逻辑 } }); ``` 在这个例子中，如果用户点击了`.child`类的元素，事件处理函数会阻止事件继续向上冒泡，因此父元素的监听器不会接收到这个事件。 闭包和事件委托都是JavaScript中不可或缺的概念。闭包允许函数访问和维护外部状态，而事件委托则优化了大规模交互元素的事件处理。理解并熟练应用这两个概念对于提升JavaScript编程能力至关重要。