javascript - 如果 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

虽然现代浏览器肯定会处理这个问题，但将数据与元素关联起来的一种可以说更好的方法是关联到符合事件监听器接口(interface)的对象。

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

您仍然可以通过 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]);

现在，当事件发生时，元素和对象之间存在关联，并且根本不存在闭包问题。