如果 dom 元素有指向闭包的指针，如果我从页面中删除 dom 元素，这会导致内存泄漏吗？

Question

例如这样的代码^

function test_mem(elm, data){
    var data_storage = data;

    function handle_input(event){
        console.log(data_storage);
    };

    function update_data(data) {
        data_storage = data;
    }

    function clear_events() {
        elm.removeEventListener('input', handle_input);
        elm.fnc_ptr = undefined;
    }

    if (elm.fnc_ptr !== undefined){
        elm.fnc_ptr.update_data(data);
    } else {
        elm.addEventListener('input', handle_input);

        elm.fnc_ptr = {
            'clear_events' : clear_events,
            'update_data' : update_data
        }
    }
}

var elm = document.getElementsByClassName('test-input')[0];
test_mem(elm, [1,2,3,54,5]);

如果我从 dom 树中删除 elm，这个关闭会导致内存泄漏吗？我认为这段代码不会导致内存泄漏，但可能是我忘记了什么。

Answer 1

虽然现代浏览器肯定会处理这个问题，但可以说将数据与元素相关联的更好方法是使用符合 事件侦听器接口.[=15= 的对象]

这使您可以将对象而不是函数绑定为事件处理程序。要求是该对象具有 handleEvent() 方法。当事件发生时，handleEvent() 被调用，this 指向您绑定的对象，它将保存存储的数据。

您仍然可以通过 event.currentTarget 访问该元素。

function TestMem(elm, data){
    this.data_storage = data;

    if (elm.has_handler !== undefined) {
        this.update_data(data);
    } else {
        elm.addEventListener('input', this);
        elm.has_handler = true;
    }
}

// Implement the Event Listener interface
TestMem.prototype.handleEvent = function(event) {
    if (event.type === "input") {
        this.handle_input(event);
    }
};

TestMem.prototype.handle_input = function(event) {
    console.log(this.data_storage);
};

TestMem.prototype.update_data = function(data) {
    this.data_storage = data;
};

TestMem.prototype.clear_events = function(event) {
    event.currentTarget.removeEventListener('input', this);
    this.has_handler = undefined;
}


var elm = document.getElementsByClassName('test-input')[0];

new TestMem(elm, [1,2,3,54,5]);

现在事件发生时元素和对象之间有了关联，完全没有闭包问题。

如果 dom 元素有指向闭包的指针，如果我从页面中删除 dom 元素，这会导致内存泄漏吗？

If dom element has pointer to closure, will this lead to memory leak if I remove dom element from page?

javascript

closures

memory-leaks