重庆政府网官网_重庆勘察设计协会网站_企点qq_今天重大新闻头条新闻军事

JavaScript 中回调函数封装

在JavaScript类中封装回调函数是一种常见的设计模式，可以帮助管理异步操作和事件处理。以下是几种在类中封装回调函数的方法：

1. 基本的回调函数封装

class DataFetcher {constructor() {this.data = null;}fetchData(callback) {// 模拟异步数据获取setTimeout(() => {this.data = { id: 1, name: 'Example' };// 调用回调函数callback(this.data);}, 1000);}
}// 使用示例
const fetcher = new DataFetcher();
fetcher.fetchData((data) => {console.log('数据已获取:', data);
});

2. 使用箭头函数保持上下文

class EventHandler {constructor() {this.events = [];}// 使用箭头函数确保正确的this绑定addEvent = (event, callback) => {this.events.push({ event, callback });}triggerEvent(eventName) {const matchedEvents = this.events.filter(e => e.event === eventName);matchedEvents.forEach(e => e.callback());}
}// 使用示例
const handler = new EventHandler();
handler.addEvent('login', () => {console.log('用户登录成功');
});
handler.triggerEvent('login');

3. Promise和回调函数结合

class AsyncService {constructor() {this.status = 'idle';}// 使用Promise封装回调performTask(callback) {return new Promise((resolve, reject) => {this.status = 'processing';setTimeout(() => {try {// 执行任务const result = { success: true, message: '任务完成' };// 如果提供了回调函数，调用回调if (callback) {callback(null, result);}// 解析Promiseresolve(result);this.status = 'completed';} catch (error) {// 如果提供了回调函数，调用回调if (callback) {callback(error, null);}// 拒绝Promisereject(error);this.status = 'error';}}, 1000);});}
}// 使用示例
const service = new AsyncService();// 使用回调函数
service.performTask((error, result) => {if (error) {console.error('任务失败:', error);} else {console.log('任务结果:', result);}
});// 使用Promise
service.performTask().then(result => {console.log('任务成功:', result);}).catch(error => {console.error('任务失败:', error);});

4. 多回调和事件监听模式

class EventEmitter {constructor() {this.listeners = {};}// 添加事件监听器on(event, callback) {if (!this.listeners[event]) {this.listeners[event] = [];}this.listeners[event].push(callback);}// 触发事件emit(event, ...args) {const eventListeners = this.listeners[event];if (eventListeners) {eventListeners.forEach(callback => {callback(...args);});}}// 移除特定事件的监听器off(event, callback) {const eventListeners = this.listeners[event];if (eventListeners) {this.listeners[event] = eventListeners.filter(listener => listener !== callback);}}
}// 使用示例
const emitter = new EventEmitter();// 添加多个监听器
const loginHandler1 = (user) => {console.log('登录处理1:', user);
};const loginHandler2 = (user) => {console.log('登录处理2:', user);
};emitter.on('login', loginHandler1);
emitter.on('login', loginHandler2);// 触发事件
emitter.emit('login', { username: 'john_doe' });// 移除特定监听器
emitter.off('login', loginHandler1);

这些示例展示了在JavaScript类中封装回调函数的不同方法：

1. 简单的回调函数调用
2. 使用箭头函数保持上下文
3. 结合Promise和回调
4. 事件发射器模式（类似Node.js的EventEmitter）

选择哪种方法取决于具体的使用场景。通常，现代JavaScript更倾向于使用Promise和async/await，但回调函数仍然在某些情况下很有用。

关键点：

• 注意this的上下文
• 提供灵活的调用方式
• 考虑错误处理
• 根据具体需求选择合适的模式