JavaScript 闭包

1、什么是闭包？

简而言之：闭包就是捕获所有在其外部函数作用域中的变量，并保持对这些变量的引用。

定义：闭包是指在创建时捕获了周围词法作用域中的变量的函数。这些变量可以在闭包内部被访问和修改，即使闭包在其词法作用域外被调用。

2、词法作用域？

词法作用域是指作用域在代码编写时已经确定，而不是在函数调用时确定。函数在定义时就“记住”了它所在的作用域。（如，局部变量。）

3、闭包基本结构如下

function add() {
	var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

4、闭包工作原理

（1）创建闭包

闭包在函数定义时创建，而不是在函数调用时创建。当一个内部函数被定义时，它捕获了所有在其外部函数作用域中的变量，并保持对这些变量的引用。

（2）维持变量的状态

闭包可以维持变量的状态，因为它们持有对词法作用域中变量的引用。即使外部函数已经返回，这些变量依然存在于闭包中。

（3）示例

function createCounter() {
  let count = 0;

  return function() {
    count++;
    return count;
  };
}

const counter1 = createCounter();
console.log(counter1()); // 输出: 1
console.log(counter1()); // 输出: 2

const counter2 = createCounter();
console.log(counter2()); // 输出: 1
console.log(counter2()); // 输出: 2

在上述示例中，createCounter函数返回一个匿名函数，该匿名函数形成了一个闭包，捕获了createCounter作用域中的变量count。每次调用counter1和counter2时，它们都能访问并修改各自独立的count变量。

5、闭包的使用场景

（1）模块化代码

将变量和函数封装在一个独立的作用域中，只暴露需要公开的接口。

const myModule = (function() {
  let privateVariable = 'I am private';

  function privateMethod() {
    console.log(privateVariable);
  }

  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

myModule.publicMethod(); // 输出: I am private
console.log(myModule.privateVariable); // 输出: undefined

（2）数据封装和信息隐藏

闭包可以用于数据封装和信息隐藏，保护变量不被外部代码直接访问和修改。

function createPerson(name) {
  let age = 0;

  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return age;
    },
    growOlder: function() {
      age++;
    }
  };
}

const person = createPerson('John');
console.log(person.getName()); // 输出: John
console.log(person.getAge()); // 输出: 0
person.growOlder();
console.log(person.getAge()); // 输出: 1

（3）回调函数和事件处理

闭包在回调函数和事件处理程序中广泛使用，确保在异步操作完成后仍然能够访问正确的变量。

//callback函数就是一个闭包，它可以访问fetchData函数作用域中的变量url。
function fetchData(url, callback) {
  setTimeout(() => {
    const data = 'Fetched data from ' + url;
    callback(data); //一个在数据“获取”完成后执行的回调函数
  }, 1000);
}

fetchData('https://api.example.com', function(data) {
  console.log(data); // 输出: Fetched data from https://api.example.com
});

（4）定时器和异步操作

闭包在定时器和异步操作中也非常有用，确保在延迟执行后仍然能够访问正确的上下文。

function startTimer() {
  let count = 0;
  // setInterval 是 JavaScript 中用于周期性执行某个函数的工具。
  //与 setTimeout 不同，setInterval 会按照设定的时间间隔（以毫秒为单位）重复执行指定的回调函数，直到你手动停止它。
  setInterval(() => {
    count++;
    console.log(count);
  }, 1000);
}

startTimer();
// 每秒输出递增的count值

6、闭包的优缺点

优点

数据封装：闭包可以将变量封装在函数作用域中，保护它们不被外部代码访问。
模块化：闭包可以用于创建模块，将相关的功能和数据封装在一起。
保持状态：闭包可以在多个函数调用之间保持状态，非常适合用于计数器等场景。

缺点

内存消耗：闭包会保留对其词法作用域中变量的引用，可能导致内存泄漏。
调试困难：由于闭包的存在，调试时可能很难追踪变量的来源和变化。