Question

我在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时，它会变慢。我不知道实际上是什么问题。

那么如何删除对象及其所有绑定事件？

Answer 1

有几件事需要考虑。首先，最重要的是，您的事件侦听器具有匿名功能。当你给它一个匿名函数时，你不能解除绑定者的绑定。所以继续为这些人做实际的功能。然后，您可以像调用removeEventListener一样调用addEvent...，它将分离这些侦听器。

我通常做的是创建一个destroy函数，删除所有侦听器并将任何全局变量设置为null。然后你可以随时调用destroy函数。

Answer 2

> var test; // I need this to be global
> function callObject(){
>     test = new testObject({...});
>     test.make();
> }

在上文中， test 仅引用 testObject 的最后一个实例。

您正在使用的模式意味着原型链上的每个函数都具有对外部IIFE的执行上下文的闭包，并且 make 方法添加的每个侦听器也是如此。如果你不需要关闭，那效率很低。如果没有，那么在这里使用IIFE是不合适的，考虑使用标准方法（它的惯例是给构造函数一个以大写字母开头的名称）：

function TestObject() {
    /*options*/
    this.options = arguments[0];
}

TestObject.prototype.make = function (){
    this.targetElement = document.getElementById('testDiv');
    this.targetElement.addEventListener('mousedown', function (e){
        ...
    };
    this.targetElement.addEventListener('mouseup', function (e){
        ...
    };
    ...
};

如其他地方所述，使用函数表达式添加侦听器会使以后很难删除它们。上述模式还意味着每个实例都有自己的函数副本。解决这两个问题的另一种方法是使用引用。您可以将它们添加为构造函数的属性，以便它们不会创建其他全局变量，也不需要其他对象，例如。

TestObject.mousedown = function (e){ ... };
TestObject.mouseup   = function (e){ ... };

TestObject.prototype.make = function(){
    var TO = TestObject;
    this.targetElement = document.getElementById('testDiv');
    this.targetElement.addEventListener('mousedown', TO.mousedown, false);
    this.targetElement.addEventListener('mouseup',  TO.mouseup, false);
    ...
};

这避免了大量的闭包和不必要的函数副本，并且意味着可以通过名称删除侦听器。您可能希望将 test 全局变为对象或数组，以便您可以继续引用 TestObject 的所有实例，而不仅仅是最后一个。

在javascript中销毁对象及其绑定

2 个答案: