闭包：JavaScript 世界中的魔力与奥秘

前端

2023-02-04 15:47:54

闭包在 JavaScript 中的威力：访问外部变量的秘密

想象一下一个侦探调查一个秘密组织。即使侦探已经离开了调查现场，他们仍然可以访问现场的秘密文件，这是因为他们手里掌握着秘密档案。

在 JavaScript 中，闭包扮演着类似的角色。闭包就像侦探的秘密档案，即使函数离开了其定义的作用域，它仍然可以访问外部变量，就像侦探仍然可以访问调查现场的秘密文件一样。

闭包的运作原理

闭包是包含在另一个函数内部的函数。当内部函数被调用时，它可以访问包含它的外部函数的所有变量。即使外部函数已经执行完毕并被销毁，内部函数仍然保留对外部变量的访问权限。

这就像侦探在调查结束后，仍然可以访问秘密文件，即使调查现场已经不再存在了。

闭包的用途

闭包在 JavaScript 中有着广泛的应用，包括：

创建私有变量和函数：

JavaScript 没有私有变量或函数的概念。闭包可以解决这一问题，因为它允许函数访问其定义作用域之外的变量。这样，我们可以将变量和函数封装在闭包中，使外部代码无法直接访问它们。

创建事件处理函数：

事件处理函数是对事件（如单击、悬停）的响应函数。闭包可以用来创建事件处理函数，因为它允许函数访问其定义作用域之外的变量。这样，外部代码就可以使用闭包作为事件处理函数，即使事件发生在闭包被定义之后。

模拟类：

JavaScript 没有类和对象的概念。闭包可以模拟类，因为它允许函数访问其定义作用域之外的变量。这样，我们可以将变量和函数封装在闭包中，并返回闭包来模拟类的实例。

代码示例：

// 创建私有变量
function createCounter() {
  let count = 0; // 私有变量
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

// 创建事件处理函数
const button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('按钮被点击了！');
});

// 模拟类
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getName() {
    return this.name;
  }

  getAge() {
    return this.age;
  }
}

const person = new Person('John', 30);
console.log(person.getName()); // John
console.log(person.getAge()); // 30