0

0

什么是闭包(Closure)?它有哪些典型用途?

紅蓮之龍

紅蓮之龍

发布时间:2025-09-03 18:04:01

|

279人浏览过

|

来源于php中文网

原创

闭包是函数与其词法环境的组合,使函数能访问并记住其外部变量,即使在外部函数执行完毕后依然保持引用,从而实现数据私有化、柯里化、事件处理等高级功能,但也需注意内存泄漏和性能开销等问题。

什么是闭包(closure)?它有哪些典型用途?

闭包,简单来说,就是一个函数和它被创建时所处的词法环境的组合。这意味着,即使这个函数在它定义时的作用域之外被执行,它依然能够“记住”并访问那个作用域里的变量。它就像一个自带行李的旅行者,无论走到哪里,都能拿出自己的私人物品。

闭包这个概念,初听起来可能有点绕,甚至让人觉得是某种魔法。但其实,它就是JavaScript(以及其他一些支持一等函数和词法作用域的语言)中一个非常核心且强大的特性。在我看来,理解闭包,就像是打开了通往函数式编程和更高级模块化设计的大门。它允许我们创建出更灵活、更私密、也更具状态管理能力的函数。

闭包是如何形成的?它的核心机制是什么?

闭包的形成,其实是语言设计中“词法作用域”和“函数作为一等公民”这两个特性交织作用的结果。当我们定义一个函数时,这个函数就“记住”了它周围的环境——也就是它能够访问的变量。这个环境,我们称之为它的“词法环境”或“作用域链”。

举个例子,你有一个外部函数,里面定义了一个局部变量,然后这个外部函数又返回了一个内部函数。这个内部函数在被定义的时候,就捕获了外部函数的那个局部变量。即使外部函数已经执行完毕,它的执行上下文被销毁了,但只要那个内部函数还存在,它就能继续访问那个被捕获的变量。这就像是外部函数在临终前,把自己的某个私有物品托付给了内部函数,内部函数就成了这个物品的唯一保管者。

function createCounter() {
    let count = 0; // 这是一个局部变量,属于createCounter的词法环境
    return function() { // 内部函数
        count++; // 访问并修改了外部函数的局部变量
        console.log(count);
    };
}

const counter1 = createCounter();
counter1(); // 输出 1
counter1(); // 输出 2

const counter2 = createCounter(); // 创建一个新的闭包实例
counter2(); // 输出 1 (与counter1的count是独立的)

在这个例子里,

createCounter
返回的匿名函数就是一个闭包。它“记住”了
count
变量,并且每次调用
counter1()
时,都能操作同一个
count
变量。而
counter2
则拥有自己独立的
count
副本。这就是闭包的核心机制:内部函数对外部函数变量的持久引用。

闭包在实际开发中有哪些典型应用场景?

闭包的应用场景非常广泛,它能解决很多实际问题,让代码更优雅、更健壮。在我日常开发中,闭包几乎无处不在,尤其是在处理状态管理、模块化和异步操作时。

  1. 数据私有化与封装(私有变量/方法):这是闭包最经典的用途之一。通过闭包,我们可以创建私有变量和私有方法,外部无法直接访问,只能通过暴露的公共接口来操作。这对于构建模块化组件和保护数据完整性至关重要。

    function createPerson(name) {
        let _age = 0; // 私有变量
        return {
            getName: function() { return name; },
            getAge: function() { return _age; },
            celebrateBirthday: function() { _age++; }
        };
    }
    const john = createPerson('John');
    console.log(john.getName()); // John
    console.log(john.getAge());  // 0
    john.celebrateBirthday();
    console.log(john.getAge());  // 1
    // console.log(john._age); // undefined,无法直接访问私有变量
  2. 函数柯里化(Currying)和偏函数应用(Partial Application):闭包允许我们创建新的函数,这些新函数预设了部分参数。这在处理一些需要多次传递相同参数的场景时非常有用,可以提高代码的复用性和可读性。

    蝉妈妈AI
    蝉妈妈AI

    电商人专属的AI营销助手

    下载
    function add(a) {
        return function(b) {
            return a + b;
        };
    }
    const addFive = add(5); // 偏函数应用,addFive现在记住a是5
    console.log(addFive(3)); // 8 (5 + 3)
    console.log(add(10)(20)); // 30 (柯里化)
  3. 事件处理器和回调函数:在异步编程或事件绑定中,闭包能够确保回调函数在执行时,能访问到它定义时的特定变量。这在循环中为每个元素绑定事件时尤为关键,避免了“循环陷阱”。

    // 假设有一个按钮列表,点击后显示各自的索引
    // 错误示例 (没有闭包,所有点击都会输出最后一个索引)
    // for (var i = 0; i < buttons.length; i++) {
    //     buttons[i].onclick = function() {
    //         console.log('你点击了第 ' + i + ' 个按钮'); // 永远是buttons.length
    //     };
    // }
    
    // 正确示例 (使用闭包捕获i的值)
    for (let i = 0; i < buttons.length; i++) { // 使用let,块级作用域天然形成闭包
        buttons[i].onclick = function() {
            console.log('你点击了第 ' + i + ' 个按钮'); // 每次都会是正确的索引
        };
    }
    // 或者使用立即执行函数表达式 (IIFE) 模拟闭包
    // for (var i = 0; i < buttons.length; i++) {
    //     (function(index) {
    //         buttons[index].onclick = function() {
    //             console.log('你点击了第 ' + index + ' 个按钮');
    //         };
    //     })(i);
    // }
  4. 模块模式(Module Pattern):虽然ES6模块已经成为主流,但在ES6之前,闭包是实现模块化、避免全局命名空间污染的主要方式。它允许我们定义一个模块,其中包含私有状态和公共接口。

    const myModule = (function() {
        let privateVar = 'Hello'; // 私有变量
        function privateMethod() {
            console.log(privateVar + ' from private method!');
        }
        return { // 公共接口
            publicMethod: function() {
                console.log('Hello from public method!');
                privateMethod();
            }
        };
    })();
    myModule.publicMethod(); // Hello from public method! Hello from private method!
    // console.log(myModule.privateVar); // undefined

使用闭包时需要注意哪些潜在问题和优化策略?

闭包虽好,但如果不加以注意,也可能带来一些潜在的问题。我个人在项目中就遇到过因为滥用闭包导致内存占用过高的情况,排查起来着实费了一番功夫。

  1. 内存泄漏(Memory Leaks):这是闭包最常被提及的“副作用”。由于闭包会持有外部作用域的引用,如果闭包本身长期存在(例如,作为全局变量或者DOM元素的事件处理器),那么它所引用的外部变量也无法被垃圾回收机制释放,即使这些变量已经不再被直接使用。这会导致内存占用持续增加,尤其是在单页应用中,页面切换或组件销毁时没有正确清理闭包,问题会更明显。

    • 优化策略
      • 及时解除引用:当不再需要闭包时,将其设置为
        null
        undefined
        ,帮助垃圾回收。例如,移除事件监听器。
      • 避免不必要的闭包:如果一个函数不需要访问外部作用域的变量,就没必要让它成为闭包。
      • 弱引用:在某些高级场景下,可以考虑使用
        WeakMap
        WeakSet
        来存储对对象的引用,但JavaScript本身对弱引用的直接控制不如其他语言那么精细。
  2. 性能开销:每次创建闭包时,都会创建一个新的函数实例和其对应的词法环境。虽然现代JavaScript引擎对闭包的优化做得很好,但在极其频繁地创建大量闭包的场景下,可能会带来轻微的性能开销。通常情况下,这种开销可以忽略不计,但在性能敏感的应用中,值得留意。

    • 优化策略
      • 缓存闭包:如果闭包的创建成本较高,且其行为在多次调用中是相同的,可以考虑缓存闭包实例。
      • 按需创建:只在确实需要时才创建闭包,而不是预先创建大量不确定是否会用到的闭包。
  3. this
    指向问题:在闭包内部,
    this
    的指向可能会变得复杂。它不取决于闭包的定义位置,而是取决于闭包的调用方式。这经常导致新手感到困惑。

    • 优化策略
      • 箭头函数(Arrow Functions):箭头函数没有自己的
        this
        ,它会捕获其外层作用域的
        this
        值。这在很多情况下能简化
        this
        的处理。
      • bind()
        方法
        :使用
        bind()
        方法可以显式地绑定
        this
        的值。
      • 保存
        this
        引用
        :在外部作用域中,将
        this
        赋值给一个变量(如
        const self = this;
        ),然后在闭包中使用
        self

总的来说,闭包是一个非常强大的工具,它赋予了JavaScript函数极大的灵活性。理解它的工作原理和潜在问题,能帮助我们写出更健壮、更高效的代码。就像任何一把双刃剑,关键在于如何巧妙地驾驭它。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

544

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

727

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

392

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

654

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

544

2023.09.20

php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

74

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 0.6万人学习

Node.js 教程
Node.js 教程

共57课时 | 7.8万人学习

CSS3 教程
CSS3 教程

共18课时 | 4.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号