AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-05-16 81
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JavaScript 闭包：让你更深入了解函数和作用域

摘要：

💡 本文将带你深入了解 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


总结：🎯

本文介绍了 JavaScript 中的闭包，这是一种可以让函数记住并访问其创建时所在的作用域的功能。通过闭包，我们可以实现私有变量和模块化代码，提高代码的可读性和可维护性。同时，我们还讨论了闭包的注意事项，以便大家能够在实际开发中更好地运用这一知识点。


参考资料：📚

  1. JavaScript 闭包
  2. JavaScript 高级程序设计
文章标签：
JavaScript
前端开发
关键词：
JavaScript闭包
JavaScript函数
JavaScript作用域
JavaScript函数作用域
JavaScript闭包作用域
阿珊和她的猫
目录
相关文章
游客tsrksm3mlhq4y
|
22天前
|
存储 JavaScript 前端开发
JavaScript 中的闭包及其应用
JS的闭包和应用
游客tsrksm3mlhq4y
31 1
游客tsrksm3mlhq4y
|
1月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
游客tsrksm3mlhq4y
74 4
李游Leo
|
3月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析：性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性，广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量，实现了私有变量和方法的创建，提升了代码的安全性和可维护性。然而，闭包也可能带来性能问题，如内存泄漏和执行效率下降。为优化闭包性能，建议采取以下策略：及时解除对不再使用的闭包变量的引用，减少闭包的创建次数，使用 WeakMap 管理弱引用，以及优化闭包结构以减少作用域链查找的开销。在实际开发中，无论是 Web 前端还是 Node.js 后端，这些优化措施都能显著提升程序的性能和稳定性。
李游Leo
151 70
大树营养快线
|
6月前
|
JavaScript 前端开发
js的作用域作用域链
【10月更文挑战第29天】理解JavaScript的作用域和作用域链对于正确理解变量的访问和生命周期、避免变量命名冲突以及编写高质量的JavaScript代码都具有重要意义。在实际开发中，需要合理地利用作用域和作用域链来组织代码结构，提高代码的可读性和可维护性。
大树营养快线
96 5
划雨悦潭之赋
|
3月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时，我能答出来的都在这里了。
闭包（Closure）是前端面试中的高频考点，广泛应用于函数式编程中。它不仅指函数内部定义的函数，还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量，但也可能引发内存泄漏等问题。通过合理使用闭包，可以实现模块化、高阶函数和回调函数等应用场景。然而，滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题，开发时应谨慎处理闭包，避免不必要的嵌套，并及时清理不再使用的变量和监听器。
划雨悦潭之赋
157 16
当面试官再问我JS闭包时，我能答出来的都在这里了。
蓝易云
|
3月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍，您可以深入理解JavaScript的流程控制和函数的使用，进而编写出高效、可维护的代码。
蓝易云
96 32
游客lijmi4663rgsa
|
2月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例，闭包的各种实践场景：高级技巧与实用指南
闭包是JavaScript中不可或缺的部分，它不仅可以增强代码的可维护性，还能在模块化、回调处理等场景中发挥巨大作用。然而，闭包的强大也意味着需要谨慎使用，避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用，你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一下，还可以收藏起来以备不时之需，有疑问和错误欢迎在评论区指出~
游客lijmi4663rgsa
44 0
游客lijmi4663rgsa
|
2月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术，它通过将函数分解为单参数形式，实现了灵活性与可复用性的统一。无论是参数复用、延迟执行，还是函数组合，柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理，再到深度嵌套的函数优化，柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码，柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用，希望这篇博客能为你揭开柯里化的奥秘，助力你的开发之旅！ 只有锻炼思维才能可持续地解决问题，只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助，麻烦您点个赞支持一
游客lijmi4663rgsa
43 0
廖小凡
|
6月前
|
自然语言处理 JavaScript 前端开发
[JS]作用域的“生产者”——词法作用域
本文介绍了JavaScript中的作用域模型与作用域，包括词法作用域和动态作用域的区别，以及全局作用域、函数作用域和块级作用域的特点。通过具体示例详细解析了变量提升、块级作用域中的暂时性死区等问题，并探讨了如何在循环中使用`var`和`let`的不同效果。最后，介绍了两种可以“欺骗”词法作用域的方法：`eval(str)`和`with(obj)`。文章结合了多位博主的总结，帮助读者更快速、便捷地掌握这些知识点。
廖小凡
71 2
[JS]作用域的“生产者”——词法作用域
廖小凡
|
6月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
廖小凡
80 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂

热门文章

最新文章

  • 1
    有哪些有效的方法可以优化Node.js应用的性能？
  • 2
    如何减少Node.js应用中的全局变量？
  • 3
    在NodeJS中使用npm包进行JS代码的混淆加密
  • 4
    现代前端开发：四大JavaScript框架和库的比较
  • 5
    Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
  • 6
    JetBrains WebStorm 2025.1 发布 - 最智能的 JavaScript IDE
  • 7
    【Java进阶】详解JavaScript的BOM（浏览器对象模型）
  • 8
    JavaScript 中的异步编程：回调函数、Promise 和 async/await
  • 9
    【Java进阶】详解JavaScript事件
  • 10
    在Node.js中，如何合理使用模块来避免全局变量的问题？
  • 1
    Mock.js 语法结构全解析
    34
  • 2
    在Node.js中，如何合理使用模块来避免全局变量的问题？
    49
  • 3
    如何减少Node.js应用中的全局变量？
    104
  • 4
    有哪些有效的方法可以优化Node.js应用的性能？
    138
  • 5
    Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
    92
  • 6
    JavaScript 错误处理：理解和应对异常
    50
  • 7
    现代前端开发：四大JavaScript框架和库的比较
    94
  • 8
    JavaScript 中的闭包及其应用
    31
  • 9
    JavaScript 中的异步编程：回调函数、Promise 和 async/await
    60
  • 10
    如何用JS实现在网页上通过鼠标移动批量选择元素的效果？
    39

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月