用es6语法实现event类

codeplay_guo

于 2017-08-16 13:35:58 发布

阅读量3.8k

点赞数

分类专栏： web前端 es6 文章标签： javascript es6

本文链接：https://blog.csdn.net/u010582082/article/details/77244161

版权

web前端同时被 2 个专栏收录

19 篇文章

订阅专栏

es6

1 篇文章

订阅专栏

本文介绍了一个简单的事件监听器类的实现，支持链式调用，包括on、off、emit和once等方法，并通过示例展示了如何使用这些方法进行事件的绑定、触发和解除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，要求可以实现链式操作，具有on，off, emit,once,

代码：

class EventEmitter{
    constructor(){
        this._events={}
    }
    on(event,callback){
        let callbacks = this._events[event] || []
        callbacks.push(callback)
        this._events[event] = callbacks
        return this
    }
    off(event,callback){
        let callbacks = this._events[event]
        this._events[event] = callbacks && callbacks.filter(fn => fn !== callback)
        return this
    }
    emit(...args){
        const event = args[0]
        const params = [].slice.call(args,1)
        const callbacks = this._events[event]
        callbacks.forEach(fn => fn.apply(this, params))
        return this
    }
    once(event,callback){
        let wrapFunc = (...args) => {
            callback.apply(this,args)
            this.off(event,wrapFunc)
        }
        this.on(event,wrapFunc)
        return this
    }
}

// 测试
let ee = new EventEmitter();
function a() {
    console.log('a')
}
function b() {
    console.log('b')
}
function c() {
    console.log('c')
}
function d(...a) {
    console.log('d',...a)
}
ee.on('TEST1', a).on('TEST2', b).once('TEST2', c).on('TEST2',d);

ee.emit('TEST1');
console.log('....')
ee.emit('TEST2');
// In test2
// In test2 again
console.log('....')
ee.emit('TEST2');