HTML

Question

我想在手动调用析构函数方法时删除eventListener。

我想的不是调用this.element.removeEventListener()，而是将null分配给this.element会有效。

但是，似乎即使在我手动调用析构函数方法之后，click事件仍然存在。

为什么？这些之间有什么区别？

如果有人解释，我感激不尽！谢谢！

HTML

<button>Button</button>

的JavaScript

class X {
    constructor() {

    this.btn = document.querySelector('button');

    this.fn = function() { 
        console.log('click');
    };

        this.btn.addEventListener('click', this.fn);

    }

    destructor() {

        // This works.
        // this.btn.removeEventListener('click', this.fn);

        // This does not work. why?
        this.btn = null;
    }
}

let x = new X();
x.destructor();

Answer 1

当你有一个引用一个对象的变量（一个元素是一个对象）时，该变量本质上只是指向对象所在的内存中位置的指针。（这就是为什么对象被引用而不是复制的原因，当分配给新变量时）所以，如果你给变量赋值为null，那么对象就不会被破坏 - 它只删除该特定变量对该对象的引用。

内存中的对象只有在（没有任何对它的引用）得到（自动）GC时才会被实际销毁。在您的情况下，DOM仍然具有对元素的引用。

如果要从DOM中删除元素（也将删除侦听器），请使用this.btn.remove()。

`element.removeEventLister`和`element = null`之间的区别是什么？

HTML

的JavaScript

1 个答案: