闭包能实现观察者模式是因为它提供了私有且持久的变量存储，使得订阅者列表_subscribers被安全封装在函数作用域内，外部无法直接访问；2. subscribe、unsubscribe和notify方法通过闭包共享_subscribers数组，实现对观察者的增删查和通知；3. 每次调用createeventbus都会创建独立的闭包环境，保证多个实例间互不干扰；4. 实际使用中需注意内存泄漏问题，即组件销毁时应主动取消订阅以避免残留回调引用导致无法回收；5. 通知顺序依赖订阅顺序，若需优先级控制则需扩展逻辑；6. 单个观察者报错可能中断通知流程，因此需用try…catch包裹回调执行以确保其他观察者仍能收到消息；7. 在复杂场景下，手动管理大量事件和订阅者会变得困难，建议引入eventemitter或rxjs等专业库进行更高效的事件流管理。
说实话，用JavaScript闭包来实现观察者模式，这事儿真挺巧妙的。它核心的思路就是，让一个函数（或者说，它返回的对象）能记住并管理它自己的一堆“听众”——那些对它的状态变化感兴趣的部分。这样，当它内部发生点什么事儿的时候，就能悄咪咪地通知到所有这些听众，而且这个听众列表还是它自己的私有财产，外面轻易动不了。
要实现这套机制，我们通常会创建一个函数，这个函数内部维护一个数组来存放所有的观察者（也就是那些回调函数）。然后，它会暴露出几个方法：一个用来添加观察者（
subscribe
），一个用来移除观察者（
unsubscribe
），还有一个是关键的，用来遍历这个数组并调用所有观察者的回调（
notify
）。这些方法都共享并操作着那个私有的观察者数组，而这个数组之所以能一直存在并被访问，正是闭包的功劳。
为什么说闭包是实现观察者模式的“自然”选择？
我个人觉得，闭包和观察者模式简直是天作之合。你想啊，观察者模式的核心不就是“一个主体（发布者）要管理一堆订阅者，并在特定事件发生时通知它们”吗？这里面最关键的一点，就是那个订阅者列表，它必须是主体的“私有财产”，不能随便被外部篡改，同时还得是持久化的，不能每次调用都重新初始化。闭包天然就提供了这种私有性和持久性。它把
observers
数组包裹在自己的作用域里，外部代码无法直接访问或修改它，只能通过你暴露出来的
subscribe
、
unsubscribe
方法来间接操作。这种封装性，让整个模式的实现显得特别干净、安全，也符合我们对模块化、解耦的追求。你不需要担心哪个外部代码不小心把你的订阅者列表给清空了，或者加了些不该加的东西。它就是那么稳妥地待在那里，等待被调用。
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
闭包实现观察者模式的具体代码示例与解析
来，我们直接看段代码，这样更直观。假设我们要创建一个简单的事件发布器：
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();// 观察者1const observer1 = (message) => { console.log('观察者1 收到消息:', message);};// 观察者2const 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
函数本身已经执行完毕，它的作用域也因为闭包的存在而没有被销毁。这就是闭包在这里的核心魔力。
这种实现方式有哪些潜在的挑战或需要注意的地方？
虽然闭包实现观察者模式很优雅，但实际使用中还是有些坑或者说需要注意的地方：
内存泄漏风险（不取消订阅）：这是最常见的。如果一个组件订阅了某个事件，但在它被销毁时没有取消订阅，那么即使组件的DOM元素被移除了，它的回调函数仍然存在于发布者的
_subscribers
列表中。这意味着，这个回调函数以及它闭包引用的所有变量（包括旧的DOM元素等）都无法被垃圾回收，导致内存泄漏。所以，养成好习惯，哪里订阅了，哪里就得考虑取消订阅。比如在React的
useEffect
清理函数里，或者Vue的
beforeDestroy
钩子里。通知顺序不确定性：我们这个简单的
forEach
循环通知，是按照订阅的先后顺序来执行的。但在某些复杂场景下，你可能需要特定的通知顺序（比如优先级高的先执行），那这个简单的实现就不够了，需要额外逻辑来管理订阅者的顺序。错误处理：如果某个观察者的回调函数在执行时抛出了错误，默认情况下，这个错误可能会中断整个
notify
循环，导致后续的观察者无法收到通知。像我上面代码里加了个
try...catch
，这是个基本的防御，但在生产环境，你可能需要更健壮的错误日志和处理机制，比如即使某个观察者报错，也要确保其他观察者能正常收到通知。“僵尸”观察者问题：这其实是内存泄漏的一种表现。如果一个观察者对象本身已经被销毁，但它的回调函数还在订阅列表中，当发布者尝试通知它时，可能会因为访问不到它内部的某些状态而报错。虽然JavaScript的垃圾回收机制在这方面比C++之类的语言友好很多，但概念上还是值得注意。复杂场景下的管理：对于只有少数几个事件和观察者的简单应用来说，这种模式很好用。但如果你的应用有几十上百种事件，每个事件又有大量的订阅者，那么手动管理这些
subscribe
/
unsubscribe
调用就会变得非常繁琐且容易出错。这时候，你可能需要引入更高级的事件库（比如EventEmitter，或者RxJS这样的响应式编程库），它们提供了更强大的事件管理、流控制和错误处理能力。
以上就是javascript闭包怎样实现观察者模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/112713.html
微信扫一扫 
支付宝扫一扫 
