我在JavaScript中有这样的类:
(function() {
this.testObject = function() {
/*options*/
this.options = arguments[0];
};
/*make object*/
testObject.prototype.make = function(){
this.targetElement = document.getElementById('testDiv');
this.targetElement.addEventListener('mousedown', function(e){
...
});
this.targetElement.addEventListener('mouseup', function(e){
...
});
this.targetElement.addEventListener('mousemove', function(e){
...
});
};
}());
var test; // I need this to be global
function callObject(){
test = new testObject({...});
test.make();
}
这个对象绑定了一些事件。示例化也在另一个函数中。这是因为我有向DOM添加新元素的情况,所以为每个新元素调用callObject()
来绑定事件。
但是我觉得这里有一个性能问题,当我多次调用callObject
时,它变慢了。我不知道实际上是什么问题。
那么我如何删除一个对象和它绑定的所有事件呢?
2条答案
按热度按时间mdfafbf11#
在上面的例子中,test 只会引用 testObject 的最后一个示例。
你使用的模式意味着prototype链上的每个函数都有一个外部IIFE执行上下文的闭包,每个由 make 方法添加的监听器也是如此。如果你不需要闭包,那么这是低效的。如果不需要,那么在这里使用IIFE是不合适的,考虑使用标准方法(惯例是给予构造函数一个以大写字母开头的名字):
正如在其他地方提到的,使用函数表达式添加侦听器会使以后很难删除它们。上述模式也意味着每个示例都有自己的函数副本。解决这两个问题的替代方案是使用引用。您可以将它们作为构造函数的属性添加,这样它们就不会创建额外的全局变量,也不需要另一个对象,例如。
这避免了大量的闭包和不必要的函数副本,意味着监听器可以按名称删除。你可能想让 test 成为一个对象或数组,这样你就可以保留对 TestObject 的所有示例的引用,而不仅仅是最后一个。
yqkkidmi2#
有几件事需要考虑。首先,也是最重要的,你的事件监听器有匿名函数。当你给予它一个匿名函数时,你不能解除绑定一个监听器。所以继续为这些监听器创建实际的函数。然后你可以像调用
addEvent...
一样调用removeEventListener
,它会分离这些监听器。我通常做的是创建一个
destroy
函数,删除所有侦听器并将所有全局变量设置为null
。然后您可以在需要时调用该destroy函数。