javascript - 如何比较用 `.bind()` 调用的两个函数？

Question

我正在我的 Socket.IO 事件和我的应用程序的其余部分之间构建一个中间件层。我这样做是为了将来可以将 Socket.IO 换成其他东西。

我将回调函数存储在一个数组中。当特定事件触发时，我遍历数组并执行回调函数。这就像一个魅力。

问题在于从该数组中删除回调。当需要删除回调函数时，我遍历数组并检查每个数组项以查看它是否等于(使用 ===)要删除的回调。当回调存储在数组中时，这工作正常。但是，当回调与 .bind() 组合存储时，相等检查返回 false。

我创建了一个(简化的)codepen 来演示这个问题:http://codepen.io/petergoes/pen/wWPJdg?editors=0012 .

我从Socket.IO代码中得到灵感，写出了我的清除方法:https://github.com/socketio/socket.io-client/blob/master/socket.io.js#L1623 .但是，同样的问题出现了。

大问题:
当使用 .bind() 方法调用(其中一个或两个)函数时，如何比较两个函数？

我找到了这个答案 how do I compare 2 functions in javascript .然而，比较函数的字符串版本感觉有点粗略

供引用的codepen:

var callbackList = [];

var objA = {
    myCallbackFunction: function myCallbackFunction() {
        console.log('hello my name is:', this.myName);
    }
}

var objB = {
    register: function register(callback) {
        console.log('register callback');
        callbackList.push(callback);
    },

    remove: function remove(callback) {
        console.log('remove callback');
        if(callbackList[0] === callback) {
            console.log('callback found, splice it');
            callbackList.splice(0, 1);
        } else {
            console.log('callback NOT found!');
        }
        console.log('callbackList length:', callbackList.length);
    }
}

objB.register(objA.myCallbackFunction.bind({myName: 'Peter'}));
objB.remove(objA.myCallbackFunction.bind({myName: 'Peter'}));

console.log('\nreset callbackList\n');
callbackList = [];

objB.register(objA.myCallbackFunction);
objB.remove(objA.myCallbackFunction);

Answer 1

我认为这里最好的解决方案是在数组内的回调旁边存储一个键。与比较功能的任何解决方案相比，这更可靠且更简单:

register: function register(callback, key) {
        console.log('register callback');
        var obj = {
           key: key,
           callback: callback
        }
        callbackList.push(obj);
    }

然后您可以通过传递所需的键而不是回调来调用 remove，您可以这样比较:

if(callbackList[0].key === key)

只需确保在注册时传递所需的键，并在必要时访问数组对象中的回调属性。

我认为这个使用标签的解决方案更简洁，不需要任何令人困惑或奇怪的代码。