闭包使用场景

闭包在JavaScript中有许多应用场景，它们可以帮助你解决各种问题，包括封装数据、创建模块、处理异步操作等。以下是一些常见的闭包应用场景：

1. 封装私有变量和方法： 使用闭包可以创建对象，其中包含私有成员变量和方法，这些成员对外部代码不可见。这有助于实现信息隐藏和数据封装。

   function Counter() {
     let count = 0;
   
     return {
       increment: function() {
         count++;
       },
       decrement: function() {
         count--;
       },
       getCount: function() {
         return count;
       }
     };
   }
   
   const counter = Counter();
   counter.increment();
   console.log(counter.getCount()); // 输出: 1
   

2. 模块模式： 闭包允许你创建具有私有状态和公共接口的模块。这可以用于将代码分成可维护的模块。

   const MyModule = (function() {
     let privateVar = 0;
   
     function privateFunction() {
       return privateVar;
     }
   
     return {
       increment: function() {
         privateVar++;
       },
       getPrivateVar: function() {
         return privateVar;
       }
     };
   })();
   
   MyModule.increment();
   console.log(MyModule.getPrivateVar()); // 输出: 1
   

3. 事件处理程序： 闭包用于处理事件监听器，它可以捕获事件处理程序内部的状态。

   function createButton() {
     let count = 0;
     const button = document.createElement('button');
     button.textContent = 'Click me';
   
     button.addEventListener('click', function() {
       count++;
       console.log(`Button clicked ${count} times`);
     });
   
     return button;
   }
   
   const button = createButton();
   document.body.appendChild(button);
   

4. 回调函数： 闭包用于创建回调函数，使其能够访问外部作用域的变量。

   function fetchData(url, callback) {
     // 模拟异步请求
     setTimeout(function() {
       const data = 'Some data fetched from ' + url;
       callback(data);
     }, 1000);
   }
   
   fetchData('https://example.com/api', function(response) {
     console.log(response);
   });
   

5. 循环中的闭包： 在循环中使用闭包可以解决经典的循环问题，例如在计时器或事件监听器中访问循环变量。

   for (var i = 0; i < 5; i++) {
     setTimeout(function() {
       console.log(i); // 输出: 5 5 5 5 5
     }, 1000);
   }
   

   若要解决此问题，可以使用闭包来捕获循环变量的值：

   for (var i = 0; i < 5; i++) {
     (function(index) {
       setTimeout(function() {
         console.log(index); // 输出: 0 1 2 3 4
       }, 1000);
     })(i);
   }