JavaScript 对象和自定义事件调度

Question

我试图让我的自定义javascript对象能够调度自己的事件。我有这个代码示例。问题是当我创建多个对象时，事件是重复的。为什么会这样呢？

(function() {
var EventDispatcher = function() {
var self = this;
self.events = {};
self.addEventListener = function(name, handler) {
if (self.events.hasOwnProperty(name)) {
self.events[name].push(handler);
} else {
self.events[name] = [handler];
}
};
self.removeEventListener = function(name, handler) {
if (!self.events.hasOwnProperty(name)) return;
var index = self.events[name].indexOf(handler);
if (index != -1) self.events[name].splice(index, 1);
};
self.fireEvent = function(name, args) {
if (!self.events.hasOwnProperty(name)) return;
if (!args || !args.length) args = [];
var evs = self.events[name],
l = evs.length;
for (var i = 0; i < l; i++) {
evs[i].apply(null, args);
}
};
};
window.EventDispatcher = EventDispatcher;
}(window));

(function(window) {
"use strict"
var PlaylistManager = function(data) {
var self = this
this.test = function() {
self.fireEvent('PlaylistManager.COUNTER_READY', [{
counter: "a"
}]);
}
}
PlaylistManager.prototype = new EventDispatcher();
window.PlaylistManager = PlaylistManager;
}(window));

var _PlaylistManager = new PlaylistManager();
_PlaylistManager.addEventListener('PlaylistManager.COUNTER_READY', function(e) {
console.log('COUNTER_READY')
})

var _PlaylistManager2 = new PlaylistManager();
_PlaylistManager2.addEventListener('PlaylistManager.COUNTER_READY', function(e) {
console.log('COUNTER_READY 2')
})
_PlaylistManager.test()
_PlaylistManager2.test()

Answer 1

当你执行PlaylistManager.prototype = new EventDispatcher();时，PlaylistManager的每个实例现在都将附加到一个事件调度程序。您已经创建了一个EventDispatcher并将其指定为所有PlaylistManager的规范。这意味着您将获得共享相同事件的所有实例。

您很可能希望每个PlaylistManager拥有一个。请参阅 MDN 文档。

(function(window) {
"use strict"
var PlaylistManager = function(data) {
var self = this
EventDispatcher.call(this);
this.test = function() {
self.fireEvent('PlaylistManager.COUNTER_READY', [{
counter: "a"
}]);
}
}
Object.setPrototypeOf(
PlaylistManager.prototype,
EventDispatcher.prototype,
);
window.PlaylistManager = PlaylistManager;
}(window));

附带的观点，但在我看来，推理 ES6 类比直接使用原型继承模型更容易。