JavaScript 闭包：让你更深入了解函数和作用域

news2024/11/17 17:53:07

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

- 摘要：
- 引言：
- 正文：
- - 1. 闭包的定义和原理🔗
  - 2. 闭包的应用场景🔨
  - 3. 闭包的注意事项📝
- 总结：🎯
- 参考资料：📚

摘要：

💡 本文将带你深入了解 JavaScript 中的闭包，这是一种强大的功能，可以让函数记住并访问其创建时所在的作用域，即使函数在一个不同的作用域被调用。通过闭包，我们可以实现私有变量和模块化代码，提高代码的可读性和可维护性。

引言：

🌱 大家好，我是阿珊。在 JavaScript 中，闭包是一个让人又爱又恨的概念。它既可以让我们编写出灵活高效的代码，也可能成为解决问题的陷阱。今天，我将和大家一起探讨闭包的原理和应用，帮助大家更好地掌握这一知识点。

正文：

1. 闭包的定义和原理🔗

闭包是指那些能够访问自由变量的函数。自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。闭包可以让函数记住并访问其创建时所在的作用域，即使函数在一个不同的作用域被调用。
示例代码如下：

function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}
const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

2. 闭包的应用场景🔨

（1）实现私有变量🔒
闭包可以用来实现私有变量，防止外部直接访问和修改。

function createPerson(name) {
  let _age = 25;
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return _age;
    },
    setAge: function(age) {
      _age = age;
    }
  };
}
const person = createPerson("Alice");
console.log(person.getName()); // Alice
console.log(person.getAge()); // 25
person.setAge(30);
console.log(person.getAge()); // 30

（2）模块化代码📦
闭包可以帮助我们将相关的函数和变量组合在一起，提高代码的可读性和可维护性。

const myModule = (function() {
  const privateVar = "I'm private";
  function privateMethod() {
    console.log(privateVar);
  }
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();
myModule.publicMethod(); // I'm private

3. 闭包的注意事项📝

（1）避免在循环中使用闭包🚫
如果在循环中使用闭包，可能会导致内存泄漏。

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i); // 输出 10 个 10
  }, 1000 * i);
}

（2）注意闭包和 this 的关系🤔
在非严格模式下，闭包中的 this 指向全局对象。在严格模式下，闭包中的 this 指向 undefined。

const obj = {
  name: "Alice",
  sayName: function() {
    return function() {
      console.log(this.name);
    };
  }
};
const sayName = obj.sayName();
sayName(); // Alice