javascript - 在 JavaScript 中销毁对象及其绑定(bind)

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();
}

该对象绑定(bind)一些事件。实例化也在另一个函数内部。这是因为我遇到了向 DOM 添加新元素的情况，因此为每个新元素调用 callObject() 来为其绑定(bind)事件。

但我认为这里存在性能问题，当我多次调用 callObject 时，速度会变慢。我不知道实际上是什么问题。

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

Answer 1

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

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

您使用的模式意味着原型(prototype)链上的每个函数都有一个到外部 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 的所有实例的引用，而不仅仅是最后一个实例。