javascript - Node.js 事件发射器源码讲解

Question

我正在查看 Node.js 事件发射器的源代码

https://github.com/nodejs/node/blob/master/lib/events.js

我试图弄清楚代码如何识别函数，特别是在使用 addListener/removeListener 时

这些函数都接受 (String s, Function f) 的签名

但我不明白的是，当调用 removeListener 时，他们如何识别要删除的函数，因为可能有多个函数作为同一事件的回调。

我想我特别想知道这条线是怎么来的

list[i] === listener

也就是说，比较两个函数是否相等，在 JS 中有效

Answer 1

but what I don't understand is how they identify which function to remove when removeListener is called, as there may be multiple functions that serve as callbacks for the same event.

eventEmitter 对象(或任何继承自它的对象)存储它管理监听器的所有事件名称的映射。然后它可以为映射中的每个事件名称存储一个函数数组。 addListener() 将函数添加到右侧列表，removeListener() 从右侧列表中删除匹配的函数。当你这样做时:

obj.addListener("someEvent", someFunction);

eventEmitter 对象确保“someEvent”在它所管理的事件名称映射中，并将 someFunction 添加到该特定事件名称的监听器数组中。给定事件名称可以有多个监听器，因此只要有多个监听器，eventEmitter 使用一个数组，以便它可以存储该特定事件的所有监听器函数。

addListener() 和 removeListener() 的代码都相当复杂，因为两者都实现了优化，这使得遵循代码变得更加困难。如果给定事件有多个监听器，则代码会在事件映射中存储一组监听器函数。但是，如果只有一个监听器，那么它只存储一个监听器(无数组)。这意味着任何使用监听器列表的代码都必须首先检查它是单个监听器还是监听器数组。

removeListener() 有两个参数，一个事件类型和一个函数。目标是为该事件找到一个先前注册的监听器，该事件注册了该特定功能并将其删除。

发射器对象本身为每种类型的事件存储了一个函数数组。因此，当 removeListener(type, listener) 被调用时，调用者传入一个事件类型和一个特定的函数。 eventEmitter 代码将在其数据中查找传入的特定事件类型的监听器列表，然后在该监听器列表中搜索与传入的特定监听器匹配的监听器。如果找到，它将被删除。

这是一份带注释的代码副本，它应该解释 removeListener() 函数中每个代码块中发生的事情:

// emits a 'removeListener' event iff the listener was removed
EventEmitter.prototype.removeListener =
    function removeListener(type, listener) {
      var list, events, position, i;

      // make sure that listener was passed in and that it's a function
      if (typeof listener !== 'function')
        throw new TypeError('"listener" argument must be a function');

      // get the map of events we have listeners for
      events = this._events;
      if (!events)
        return this;

      // get the list of functions for the specific event that was passed in
      list = events[type];
      if (!list)
        return this;

      // handle some special cases when there is only one listener for an event
      if (list === listener || (list.listener && list.listener === listener)) {
        if (--this._eventsCount === 0)
          this._events = {};
        else {
          delete events[type];
          if (events.removeListener)
            this.emit('removeListener', type, listener);
        }
      } else if (typeof list !== 'function') {
        // when not a special case, we will have to find the right
        // function in the array so initialize our position variable
        position = -1;

        // search backward through the array of functions to find the
        // matching function
        for (i = list.length; i-- > 0;) {
          if (list[i] === listener ||
              (list[i].listener && list[i].listener === listener)) {
            position = i;
            break;
          }
        }

        // if we didn't find it, nothing to do so just return
        if (position < 0)
          return this;

        // if the list has only one function in it, then just clear the list
        if (list.length === 1) {
          list[0] = undefined;
          if (--this._eventsCount === 0) {
            this._events = {};
            return this;
          } else {
            delete events[type];
          }
        } else {
          // remove that one function from the array
          spliceOne(list, position);
        }

        // send out an event if we actually removed a listener
        if (events.removeListener)
          this.emit('removeListener', type, listener);
      }

      return this;
    };

---

根据评论添加解释:

Javascript 中的函数是一流的对象。当代码使用 == 或 === 来比较两个函数或将变量与函数引用进行比较时，Javascript 只是比较每个操作数是否指向相同的对象底层 Javascript 对象。这里没有使用 .toString()。它只是测试它们是否指的是同一个物理对象。

这里有几个例子:

function myFunc() {
   console.log("hello");
}

var a = myFunc;
if (a === myFunc) {
    console.log("Yes, a does refer to myFunc");
}

var b = a;
if (b === a) {
    console.log("Yes, a and b refer to the same function");
}

function myFunc2() {
   console.log("hello");
}

a = myFunc;
b = myFunc2;

if (a !== b) {
    console.log("a and b do not refer to the same function");
}

或者，更像是在工作片段中 addListener() 和 removeListener() 中使用的内容:

function myFunc() {
   console.log("hello");
}

var list = [];
log("Items in list initially: " + list.length);
list.push(myFunc);
log("Items in list after adding: " + list.length);

// search through list to find and remove any references to myFunc
for (var i = list.length - 1; i >= 0; i--) {
    if (list[i] === myFunc) {
         list.splice(i, 1);
    }
}

log("Items in list after find/remove: " + list.length);

// helper function to log output
function log(x) {
    var div = document.createElement("div");
    div.innerHTML = x;
    document.body.appendChild(div);
}