JS小贴士：理解闭包与事件委托的阻止冒泡

"这篇资源主要讨论了JavaScript编程中的两个重要概念——闭包和事件委托的阻止冒泡。通过实例解析了闭包的产生及其工作原理，同时也提到了一个实际编程场景中遇到的问题以及如何利用闭包来解决。此外，还简要提到了事件委托和阻止冒泡在JavaScript事件处理中的应用。" 闭包是一种特殊的函数，它能够记住并访问自身作用域内的变量，即使在其外部被调用。在JavaScript中，当一个内部函数引用了外部函数的变量，并且外部函数返回了这个内部函数，就会形成闭包。例如： ```javascript function a() { var i = 0; function b() { console.log(i); } return b; } var c = a(); c(); // 输出 0 ``` 在这个例子中，`b`函数就是闭包，因为它引用了外部函数`a`的变量`i`。即使`a`执行完毕，`i`也不会被垃圾回收（GC），因为`b`仍然持有对它的引用。 JavaScript的作用域链是理解闭包的关键。每个函数都有一个作用域链，它包含了函数定义时的作用域（全局或局部）以及当前执行环境的作用域。当函数执行时，一个新的执行环境会创建，其作用域链的顶部是该执行环境的活动对象，下方则是上一级环境的作用域，一直延伸到全局作用域。 在上述例子中，`b`的作用域链包含了`a`的活动对象，因此`b`可以访问到`a`的变量`i`，即使`a`已经执行完毕。这就是闭包让变量持久化的原因。 实际场景中，闭包可能引发的问题是变量共享。如描述中提到，同事的代码利用闭包生成getter和setter时，由于所有getter和setter都共享同一个作用域，导致变量`k`的值在整个循环结束后固定为最后一个迭代的值。为了解决这个问题，可以通过立即执行函数表达式（IIFE）为每个循环创建一个独立的作用域： ```javascript var User = function(opts) { var scope = this; for (var k in opts) { (function(k) { scope['get' + k] = function() { return opts[k]; }; scope['set' + k] = function(v) { return opts[k] = v; }; })(k); } }; ``` 关于事件委托，它是优化JavaScript事件处理的一种方法，通过在父元素上监听事件，而不是在每个子元素上分别添加事件处理器。当事件在子元素上触发时，事件会冒泡到父元素，从而触发父元素上的事件处理器。阻止冒泡是指在事件处理函数中使用`event.stopPropagation()`方法，防止事件继续向上层元素传播，使得只有当前元素的事件处理器被执行。 总结来说，闭包是JavaScript中的强大工具，用于管理作用域和内存，而事件委托和阻止冒泡则是优化前端性能和控制事件流的关键技术。理解并熟练运用这些概念对于提升JavaScript编程技能至关重要。