Question

我正在使用一些代码，我需要将一系列事件附加到动态创建的元素中。我想知道在内存泄漏方面，一种方式是否优于另一种方式。我花了好几个小时在Chome的记忆档案中，我不能为我的生活找出如何使用它，所以我无法判断一种方法是否造成泄漏。

在从DOM中删除节点之前，我会分离onclick事件，但不确定是否还有其他需要注意的事项。

我在下面创建了一个示例。

click me 1创建一个新的div，并将命名函数分配给第一个和第二个onclick
click me 2创建一个新的div并为第一个和第二个onclick分配一个匿名内部函数

＆＃13;

function startIt1(div)
{
    var newDiv = document.createElement("div");
    newDiv.className = "two";
    newDiv.innerText = "click me 1a";
    newDiv.onclick = step1;
    document.body.appendChild(newDiv);
}

function step1()
{
    this.innerText = "click me 1b";
    this.className = "three";
    this.onclick = step2;
}

function step2()
{
    this.onclick = null;
    this.parentNode.removeChild(this);
}

function startIt2(div)
{
    var newDiv = document.createElement("div");
    newDiv.className = "two";
    newDiv.innerText = "click me 2a";
    newDiv.onclick = function()
    {
        newDiv.innerText = "click me 2b";
        newDiv.className = "three";
        newDiv.onclick = function()
        {
            newDiv.onclick = null;
            newDiv.parentNode.removeChild(newDiv);
        }
    };
    document.body.appendChild(newDiv);
}

＆＃13;

div
{
    padding: 20px;
    margin: 20px;
}

.one
{
    background-color: lime;
}

.two
{
    background-color: yellow;
}

.three
{
    background-color: cyan;
}
}

＆＃13;

<div class="one" onclick="startIt1(this)">click me 1</div>

<div class="one" onclick="startIt2(this)">click me 2</div>

＆＃13;

Answer 1

除非你没有显示哪些东西持有对这些事件处理程序的引用，否则上述任何一个都不会在删除处理程序后不必要地保留内存。

第二个，使用内部函数，理论上保持对startIt2的调用的上下文（这是一个抽象对象），直到删除处理程序和元素，但直到那时为止。那是因为内部函数是对该上下文的闭包。智能JavaScript引擎可以优化一点，但不能完全删除它，因为内部函数在其中引用了newDiv。（如果您使用this代替，智能引擎将能够完全优化上下文保留 - 无论依赖于引擎以及它是否是代码中的热点。）< / p>

也许略显简洁，但使用命名函数具有与内存消耗无关的好处，例如调用堆栈中有意义的名称等等......当然，如果在多个地方使用相同的处理程序，则可以使用一个功能而不是一个以上。

javascript匿名事件vs命名

1 个答案: