理解 JavaScript EventEmitter(2)

const toString = Object.prototype.toString; const isType = obj => toString.call(obj).slice(8, -1).toLowerCase(); const isArray = obj => Array.isArray(obj) || isType(obj) === 'array'; const isNullOrUndefined = obj => obj === null || obj === undefined;

这4行就是一些工具函数,判断所属类型、判断是否是 null 或者 undefined。

constructor() { if (isNullOrUndefined(this._events)) { this._events = Object.create(null); } }

创建了一个 EventEmitter 类,然后在构造函数里初始化一个类的 _events 属性,这个属性不需要要继承任何东西,所以用了 Object.create(null)。当然这里 isNullOrUndefined(this._events) 还去判断了一下 this._events 是否为 undefined 或者 null,如果是才需要创建。但这不是必要的,因为实例化一个 EventEmitter 都会调用构造函数,皆为初始状态,this._events 应该是不可能已经定义了的,可去掉。

addListener(type, fn, context) { return _addListener.call(this, type, fn, context); } on(type, fn, context) { return this.addListener(type, fn, context); } once(type, fn, context) { return _addListener.call(this, type, fn, context, true); }

接下来是三个方法 addListener、on、once ,其中 on 是 addListener 的别名,可执行多次。once 只能执行一次。

三个方法都用到了 _addListener 方法:

const _addListener = function(type, fn, context, once) { if (typeof fn !== 'function') { throw new TypeError('fn must be a function'); } fn.context = context; fn.once = !!once; const event = this._events[type]; // only one, let `this._events[type]` to be a function if (isNullOrUndefined(event)) { this._events[type] = fn; } else if (typeof event === 'function') { // already has one function, `this._events[type]` must be a function before this._events[type] = [event, fn]; } else if (isArray(event)) { // already has more than one function, just push this._events[type].push(fn); } return this; };

方法有四个参数,type 是监听事件的名称,fn 是监听事件对应的方法,context 俗称爸爸,改变 this 指向的,也就是执行的主体。once 是一个布尔型,用来标志是否只执行一次。
首先判断 fn 的类型,如果不是方法,抛出一个类型错误。fn.context = context;fn.once = !!once 把执行主体和是否执行一次作为方法的属性。const event = this._events[type] 把该对应 type 的所有已经监听的方法存到变量 event。

// only one, let `this._events[type]` to be a function if (isNullOrUndefined(event)) { this._events[type] = fn; } else if (typeof event === 'function') { // already has one function, `this._events[type]` must be a function before this._events[type] = [event, fn]; } else if (isArray(event)) { // already has more than one function, just push this._events[type].push(fn); } return this;

如果 type 本身没有正在监听任何方法,this._events[type] = fn 直接把监听的方法 fn 赋给 type 属性 ;如果正在监听一个方法,则把要添加的 fn 和之前的方法变成一个含有2个元素的数组 [event, fn],然后再赋给 type 属性,如果正在监听超过2个方法,直接 push 即可。最后返回 this ,也就是 EventEmitter 实例本身。

简单来讲不管是监听多少方法,都放到数组里是没必要像上面细分。但性能较差,只有一个方法时 key: fn 的效率比 key: [fn] 要高。

再回头看看三个方法:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pxgyf.html