0

0

javascript闭包怎样实现观察者模式

煙雲

煙雲

发布时间:2025-08-15 11:29:01

|

664人浏览过

|

来源于php中文网

原创

闭包能实现观察者模式是因为它提供了私有且持久的变量存储,使得订阅者列表\_subscribers被安全封装在函数作用域内,外部无法直接访问;2. subscribe、unsubscribe和notify方法通过闭包共享\_subscribers数组,实现对观察者的增删查和通知;3. 每次调用createeventbus都会创建独立的闭包环境,保证多个实例间互不干扰;4. 实际使用中需注意内存泄漏问题,即组件销毁时应主动取消订阅以避免残留回调引用导致无法回收;5. 通知顺序依赖订阅顺序,若需优先级控制则需扩展逻辑;6. 单个观察者报错可能中断通知流程,因此需用try...catch包裹回调执行以确保其他观察者仍能收到消息;7. 在复杂场景下,手动管理大量事件和订阅者会变得困难,建议引入eventemitter或rxjs等专业库进行更高效的事件流管理。

javascript闭包怎样实现观察者模式

说实话,用JavaScript闭包来实现观察者模式,这事儿真挺巧妙的。它核心的思路就是,让一个函数(或者说,它返回的对象)能记住并管理它自己的一堆“听众”——那些对它的状态变化感兴趣的部分。这样,当它内部发生点什么事儿的时候,就能悄咪咪地通知到所有这些听众,而且这个听众列表还是它自己的私有财产,外面轻易动不了。

javascript闭包怎样实现观察者模式

要实现这套机制,我们通常会创建一个函数,这个函数内部维护一个数组来存放所有的观察者(也就是那些回调函数)。然后,它会暴露出几个方法:一个用来添加观察者(

subscribe
),一个用来移除观察者(
unsubscribe
),还有一个是关键的,用来遍历这个数组并调用所有观察者的回调(
notify
)。这些方法都共享并操作着那个私有的观察者数组,而这个数组之所以能一直存在并被访问,正是闭包的功劳。

为什么说闭包是实现观察者模式的“自然”选择?

我个人觉得,闭包和观察者模式简直是天作之合。你想啊,观察者模式的核心不就是“一个主体(发布者)要管理一堆订阅者,并在特定事件发生时通知它们”吗?这里面最关键的一点,就是那个订阅者列表,它必须是主体的“私有财产”,不能随便被外部篡改,同时还得是持久化的,不能每次调用都重新初始化。闭包天然就提供了这种私有性和持久性。它把

observers
数组包裹在自己的作用域里,外部代码无法直接访问或修改它,只能通过你暴露出来的
subscribe
unsubscribe
方法来间接操作。这种封装性,让整个模式的实现显得特别干净、安全,也符合我们对模块化、解耦的追求。你不需要担心哪个外部代码不小心把你的订阅者列表给清空了,或者加了些不该加的东西。它就是那么稳妥地待在那里,等待被调用。

立即学习Java免费学习笔记(深入)”;

靠岸学术
靠岸学术

一款集翻译,阅读,文献管理于一体的英文文献阅读器

下载
javascript闭包怎样实现观察者模式

闭包实现观察者模式的具体代码示例与解析

来,我们直接看段代码,这样更直观。假设我们要创建一个简单的事件发布器:

function createEventBus() {
    let _subscribers = []; // 这是一个私有变量,通过闭包保持持久性

    return {
        /**
         * 订阅事件
         * @param {Function} callback - 观察者回调函数
         * @returns {Function} - 返回一个取消订阅的函数,方便链式调用或直接取消
         */
        subscribe: function(callback) {
            if (typeof callback !== 'function') {
                console.warn('订阅者必须是一个函数!');
                return;
            }
            _subscribers.push(callback);
            console.log('有新的订阅者加入!当前订阅数:', _subscribers.length);

            // 返回一个取消订阅的函数,这是个很实用的模式
            // 注意:这里的 `this` 指向返回的对象,确保 unsubscribe 正确调用
            return () => {
                this.unsubscribe(callback);
            };
        },

        /**
         * 取消订阅
         * @param {Function} callback - 要移除的观察者回调函数
         */
        unsubscribe: function(callback) {
            _subscribers = _subscribers.filter(sub => sub !== callback);
            console.log('有订阅者离开了。当前订阅数:', _subscribers.length);
        },

        /**
         * 通知所有订阅者
         * @param {*} data - 要传递给观察者的数据
         */
        notify: function(data) {
            console.log('开始通知所有订阅者...');
            _subscribers.forEach(callback => {
                try {
                    callback(data);
                } catch (error) {
                    // 实际项目中这里可能需要更复杂的错误处理,比如记录日志
                    console.error('通知某个订阅者时出错:', error);
                }
            });
            console.log('通知完成。');
        }
    };
}

// 使用示例:
const myEventBus = createEventBus();

// 观察者1
const observer1 = (message) => {
    console.log('观察者1 收到消息:', message);
};

// 观察者2
const observer2 = (message) => {
    console.log('观察者2 收到消息:', message.toUpperCase());
};

// 订阅
const unsubscribe1 = myEventBus.subscribe(observer1);
myEventBus.subscribe(observer2);
myEventBus.subscribe((data) => { // 匿名函数也可以
    console.log('匿名观察者收到:', data.length, '个字符');
});

console.log('\n--- 第一次通知 ---');
myEventBus.notify('Hello World');

// 取消订阅一个观察者
unsubscribe1(); // 或者 myEventBus.unsubscribe(observer1);

console.log('\n--- 第二次通知 ---');
myEventBus.notify('Goodbye');

// 尝试订阅一个非函数
myEventBus.subscribe('not a function');

这段代码里,

_subscribers
数组就是被
createEventBus
函数的闭包“捕获”的。每次调用
createEventBus()
都会创建一个新的、独立的
_subscribers
数组,以及一套操作这个数组的方法。这意味着,你创建的每个
myEventBus
实例都有自己独立的订阅者列表,互不干扰。
subscribe
unsubscribe
notify
这三个方法,无论何时被调用,都能访问到并操作它们共同作用域里的那个
_subscribers
数组,即使
createEventBus
函数本身已经执行完毕,它的作用域也因为闭包的存在而没有被销毁。这就是闭包在这里的核心魔力。

javascript闭包怎样实现观察者模式

这种实现方式有哪些潜在的挑战或需要注意的地方?

虽然闭包实现观察者模式很优雅,但实际使用中还是有些坑或者说需要注意的地方:

  • 内存泄漏风险(不取消订阅):这是最常见的。如果一个组件订阅了某个事件,但在它被销毁时没有取消订阅,那么即使组件的DOM元素被移除了,它的回调函数仍然存在于发布者的
    _subscribers
    列表中。这意味着,这个回调函数以及它闭包引用的所有变量(包括旧的DOM元素等)都无法被垃圾回收,导致内存泄漏。所以,养成好习惯,哪里订阅了,哪里就得考虑取消订阅。比如在React的
    useEffect
    清理函数里,或者Vue的
    beforeDestroy
    钩子里。
  • 通知顺序不确定性:我们这个简单的
    forEach
    循环通知,是按照订阅的先后顺序来执行的。但在某些复杂场景下,你可能需要特定的通知顺序(比如优先级高的先执行),那这个简单的实现就不够了,需要额外逻辑来管理订阅者的顺序。
  • 错误处理:如果某个观察者的回调函数在执行时抛出了错误,默认情况下,这个错误可能会中断整个
    notify
    循环,导致后续的观察者无法收到通知。像我上面代码里加了个
    try...catch
    ,这是个基本的防御,但在生产环境,你可能需要更健壮的错误日志和处理机制,比如即使某个观察者报错,也要确保其他观察者能正常收到通知。
  • “僵尸”观察者问题:这其实是内存泄漏的一种表现。如果一个观察者对象本身已经被销毁,但它的回调函数还在订阅列表中,当发布者尝试通知它时,可能会因为访问不到它内部的某些状态而报错。虽然JavaScript的垃圾回收机制在这方面比C++之类的语言友好很多,但概念上还是值得注意。
  • 复杂场景下的管理:对于只有少数几个事件和观察者的简单应用来说,这种模式很好用。但如果你的应用有几十上百种事件,每个事件又有大量的订阅者,那么手动管理这些
    subscribe
    /
    unsubscribe
    调用就会变得非常繁琐且容易出错。这时候,你可能需要引入更高级的事件库(比如EventEmitter,或者RxJS这样的响应式编程库),它们提供了更强大的事件管理、流控制和错误处理能力。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

267

2025.12.04

堆和栈的区别
堆和栈的区别

堆和栈的区别:1、内存分配方式不同;2、大小不同;3、数据访问方式不同;4、数据的生命周期。本专题为大家提供堆和栈的区别的相关的文章、下载、课程内容,供大家免费下载体验。

447

2023.07.18

堆和栈区别
堆和栈区别

堆(Heap)和栈(Stack)是计算机中两种常见的内存分配机制。它们在内存管理的方式、分配方式以及使用场景上有很大的区别。本文将详细介绍堆和栈的特点、区别以及各自的使用场景。php中文网给大家带来了相关的教程以及文章欢迎大家前来学习阅读。

606

2023.08.10

go语言闭包相关教程大全
go语言闭包相关教程大全

本专题整合了go语言闭包相关数据,阅读专题下面的文章了解更多相关内容。

153

2025.07.29

DOM是什么意思
DOM是什么意思

dom的英文全称是documentobjectmodel,表示文件对象模型,是w3c组织推荐的处理可扩展置标语言的标准编程接口;dom是html文档的内存中对象表示,它提供了使用javascript与网页交互的方式。想了解更多的相关内容,可以阅读本专题下面的文章。

4348

2024.08.14

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

25

2026.03.13

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

44

2026.03.12

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

174

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

50

2026.03.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Vue 教程
Vue 教程

共42课时 | 9.5万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

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

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