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

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

这使您可以将对象绑定为事件处理程序而不是函数。要求是对象具有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元素，这会导致内存泄漏吗？

1 个答案: