Javascript 闭包变量性能

Question

我有一个绑定(bind)不同表单输入的函数

function bindInputs() {
    $(".inputContainer").each(function(i){
        var inputContainer = $(this),
            input = $("input.input", inputContainer),
            inputType = inputContainer.attr("data-inputType"),
            input_Id = inputContainer.attr("id").replace("inputContainer_", "");


        if(inputType == "TextEditor") {
            input.unbind("change").bind("change", function() {
                inputContainer.removeClass("nullValue");
                var value = input.val();
                saveInputValue(input_Id, value);
            });

            return true;
        }

        if(inputType == "NumericEditor") {
            input.numeric({ allow: "." });
            input.unbind("change").bind("change", function() {
                inputContainer.removeClass("nullValue");
                var value = getNumericValue(input.val());
                saveInputValue(input_Id, value);
            });
        }

        // so on
    });
};

这个函数会造成内存泄漏吗？我担心的是我将所有共享变量都放在顶部并在“更改”回调函数中使用它们。

如果我重新计算回调函数上的共享变量会有不同吗？

if(inputType == "TextEditor") {
    input.unbind("change").bind("change", function() {
        var elem = $(this),
            inputContainer = elem.closest(".inputContainer"),
            input_Id = inputContainer.attr("id").replace("inputContainer_", "");

        inputContainer.removeClass("nullValue");
        var value = input.val();
        saveInputValue(input_Id, value);
    });

    return true;
}

Answer 1

它不会造成泄漏。只要这些函数在内存中，它就会将这些变量保留在内存中。

是否要这样做取决于您，这是一种权衡。对于 change 处理程序，重新查询 DOM 的开销很小，因此您可以使用第二个示例，尽管您在该示例中保留的内容的实际内存影响相当小。在 mousemove 处理程序中，您可能会走另一条路，因为 mousemove 处理程序需要非常快速地完成工作。

在下面的评论中回复您的问题:

Saying that i will chose the second approach, how i will prevent the browser to save the top variables? I set them to null at the end of the function?

如果您要使函数不依赖 bindInputs 函数中的任何东西，请将它们完全定义在函数之外。然后，您根本不会在调用 bindInputs 的上下文中创建任何闭包，并且可以对上下文进行 GC(连同它包含的任何变量)。将变量设置为 null 或 undefined 只是将它们设置为 null 或 undefined，它不会删除它们. (尽管那时，包含它们的上下文非常小。只有三四个没有特别引用任何内容的变量。)

这可能是这样的:

function bindInputs() {
    $(".inputContainer").each(function(i){
        var inputContainer = $(this),
            input = $("input.input", inputContainer),
            inputType = inputContainer.attr("data-inputType");


        if(inputType == "TextEditor") {
            input.unbind("change").bind("change", handleTextEditorChange);

            return true;
        }

        if(inputType == "NumericEditor") {
            input.numeric({ allow: "." });
            input.unbind("change").bind("change", handleNumericEditorChange);
        }

        // so on
    });
}

function handleTextEditorChange() {
    // ...implementation...
}

function handleNumericEditorChange() {
    // ...implementation...
}