你懂什么是闭包吗-看场景学懂闭包

闭包是什么？

闭包是指有权访问另一个函数作用域中变量的函数。

当某个函数被调用时，会创建一个作用域和相应的作用域链，然后使用arguments和其他命名参数的值来初始化函数的活动对象。

从内到外函数的活动对象直至全局执行环境的变量对象形成作用域链。

在函数执行完后，作用域会被清理，内存会被回收，但由于闭包函数是建立在函数内部的子函数，外部函数执行完后，作用域链会被销毁，但他的活动对象并不会被销毁，因为子函数的作用域链仍有对他的引用。

闭包在 JavaScript 中有许多常见的应用场景。以下是一些常见的使用闭包的场景：

1. 创建私有变量和方法：使用闭包可以创建具有私有状态的对象，通过将变量和函数包装在闭包内部，可以隐藏它们对外部的可见性，实现数据的封装和信息隐藏。

2. 模块化开发：闭包可以用于创建模块化的代码结构，将相关的变量和函数封装在闭包内部，仅暴露需要对外使用的接口，避免全局命名空间污染和冲突。

3. 延迟执行和回调函数：通过使用闭包，可以实现延迟执行代码块，例如在定时器中使用闭包封装要延迟执行的函数。此外，闭包还可以解决回调函数中的作用域问题，确保回调函数能够访问正确的变量。

4. 缓存：闭包可以用于实现缓存功能，例如在函数内部缓存计算结果，以避免重复计算。通过将计算结果存储在闭包中，并在每次调用函数时检查缓存，可以提高代码的执行效率。

5. 实现函数柯里化：柯里化是一种将多个参数的函数转换为接收单个参数的函数序列的技术。通过使用闭包，可以创建一个接收部分参数的函数，并返回一个闭包，该闭包接收剩余的参数，从而实现函数柯里化。

6. 事件处理：闭包可以用于处理事件回调函数，确保回调函数能够访问正确的变量和状态。通过将事件处理函数封装在闭包中，可以保持事件处理函数的上下文，并访问外部的变量和状态。

需要注意的是，闭包可以带来方便和灵活性，但也可能导致内存泄漏和性能问题。在使用闭包时，需要谨慎管理变量的生命周期，确保及时释放不再需要的引用，避免造成资源浪费。

1.封装私有变量和方法：

function Counter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  function decrement() {
    count--;
    console.log(count);
  }

  return {
    increment: increment,
    decrement: decrement
  };
}

var counter = Counter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

在上述示例中，Counter 函数返回一个包含 increment 方法的对象。该方法可以访问并更新函数作用域内的 count 变量，但外部无法直接访问 count。

2.实现模块化： 

var Module = (function() {
  var privateVariable = 'I am private';

  function privateFunction() {
    console.log('This is a private function');
  }

  return {
    publicFunction: function() {
      console.log('This is a public function');
    }
  };
})();

Module.publicFunction(); // 输出: "This is a public function"

在这个示例中，我们使用立即调用的函数表达式 (IIFE) 创建了一个模块。该模块内部包含私有变量和函数，只有在返回的对象中公开的方法对外可见。

3.延迟执行和回调函数：

function delayExecution() {
  for (var i = 1; i <= 5; i++) {
    (function(j) {
      setTimeout(function() {
        console.log(j);
      }, j * 1000);
    })(i);
  }
}

delayExecution();
// 输出: 1（延迟1秒）
// 输出: 2（延迟2秒）
// 输出: 3（延迟3秒）
// 输出: 4（延迟4秒）
// 输出: 5（延迟5秒）

在上述示例中，通过使用立即执行函数表达式和闭包，可以在循环中创建延迟执行的函数，并确保每个函数都能够访问正确的循环变量 i 的值。

4.缓存

function memoizedFunction() {
  var cache = {};

  return function(n) {
    if (n in cache) {
      console.log('Fetching from cache');
      return cache[n];
    } else {
      console.log('Calculating result');
      var result = n * n;
      cache[n] = result;
      return result;
    }
  };
}

var calculateSquare = memoizedFunction();
console.log(calculateSquare(5)); // 输出: "Calculating result"，25
console.log(calculateSquare(5)); // 输出: "Fetching from cache"，25

在上述示例中，memoizedFunction 返回一个闭包函数。该闭包函数使用 cache 对象来缓存计算结果，如果已经计算过某个值，则从缓存中获取结果，否则进行计算并缓存。

5.实现函数柯里化：

function curry(func) {
  return function curried(...args) {
    if (args.length >= func.length) {
      return func.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

function add(a, b, c) {
  return a + b + c;
}

var curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 输出: 6
console.log(curriedAdd(1, 2)(3)); // 输出: 6
console.log(curriedAdd(1)(2, 3)); // 输出: 6

在上述示例中，curry 函数接收一个函数 func，并返回一个新的柯里化函数。该柯里化函数使用闭包来保存已传递的参数，并在参数数量满足条件时调用原始函数。

6.事件处理：

function handleClick() {
  var count = 0;

  return function() {
    count++;
    console.log('Button clicked ' + count + ' times');
  };
}

var button = document.getElementById('myButton');
button.addEventListener('click', handleClick());

在上述示例中，handleClick 返回一个闭包函数，并将其作为事件处理函数绑定到按钮的点击事件上。每次点击按钮时，闭包函数都会被调用，增加计数器的值，并输出点击次数。