Question

我的页面中有 100 按钮（每个按钮都有类 =' btn '）。

此外，我还有单按钮，准备所有其他 100按钮。

<input type='button' onclick='bindTheClickevent()' />

按下时， - 他调用 bindTheClickevent （） - （将点击事件绑定到所有其他100个人）。

在脚本部分，我把：

function bindTheClickevent ()
{
        $(".btn").bind('click',function () {
          $(this).css('color','red');
         });
}

问题

1 ）在内存中，instances anonymous function中有多少created是be free (GC)？

2 ）在内存中， bindTheClickevent （）函数是否会bindTheClickevent？ - 请注意，Bind在will be free to GC函数

中被称为。

3 ）何时，最终 - bindTheClickevent 函数function bindTheClickevent () { $(".btn").bind('click',function () { changeColor($(this)); }); } function changeColor(obj) { $(obj).css('color','red'); }？

让我们做出改变

instances

现在 - 更改后

1 ）如果我这样做有什么不同吗？

2 ）在内存中，anonymous function created中有多少be free (GC)是bindTheClickevent？

3 ） bindTheClickevent （）函数是否会{{1}}？ - 请注意，Bind在{{1}}函数

中被称为。

Answer 1

看起来在这两种情况下只创建了一个函数实例。似乎匿名函数的引用被附加为每个元素的事件处理程序。

Example - 使用闭包显示按钮事件处理程序之间的范围共享。

注意如果涉及闭包，这可能会导致有趣的行为，因为所有元素都将共享相同的函数（和闭包范围）。

不，由于它们的全球范围，你声明的函数不会被GC。

的另外 的

要单独附加它们（不是通过引用），请使用.each()遍历所选元素并单独附加该功能。

<强> Example

$('.btn').each(function() { $(this).bind('click',function() { // each '.btn' has it's own copy of // this anonymous function } });

Answer 2

“1）在内存中，创建了多少个匿名函数实例？”

哪个匿名功能？

对于内联onclick，您将获得一个分配给元素的onclick属性的函数，如下所示：

function(event) {

    bindTheClickevent();

}

...或类似的取决于实施。当元素被取消引用或从onclick属性取消引用该函数时，该函数对于GC是免费的。

关于jQuery代码：

$(".btn").bind('click',function () {
    $(this).css('color','red');
});

...虽然匿名函数是共享的，但你看不到的是如果有问题的元素还没有绑定jQuery处理程序，jQuery将内部创建一个独特的函数每个元素。

内部处理程序是实际绑定到元素的内容，当元素接收到事件时，调用该处理程序，分析事件，并调用最初传递的处理程序（如果需要）

这意味着 100个jQuery绑定元素等于101个唯一函数实例 。

为了确保使用jQuery绑定的任何处理程序都是GC，您需要确保 始终使用jQuery删除DOM元素 。如果不这样做，jQuery.cache中存储的所有数据（包括处理程序）都不会被清除，因此它们将始终通过全局jQuery命名空间引用。

修改

鉴于有100个元素具有类btn，没有任何jQuery绑定的处理程序，那么这段代码：

$(".btn").bind('click',function () { $(this).css('color','red'); });

...将创建101个唯一Function个实例。

为什么101？

嗯，jQuery所做的是第一次将处理程序绑定到元素时，它会在内部为每个元素创建一个唯一泛型处理程序。这是在事件发生时实际调用的处理程序，它处理所有事件类型。

您的处理程序函数从不实际绑定到该元素。

因此，调用时通用内部处理程序将分析发生的事件，并查看是否有任何处理程序使用与该事件类型匹配的.bind()与给定元素相关联。如果是这样，它会调用传递的处理程序。

现在假设您绑定另一个处理程序：

$(".btn").bind('mouseenter',function () { $(this).css('color','blue'); });

...因为我们绑定到相同的元素，所以它们已经拥有必要的内部处理程序，而另一个则不需要创建。所有发生的事情都是您传递的函数在内部引用，并在需要时由通用内部处理程序调用。

因此，根据上面的代码段，现在存在102个唯一Function个实例。

Answer 3

如果您执行以下操作：

for (someiterations)
{
    $(myobj).bind("click",function()
    {
        // ...bla...
    });
}

在这种情况下，您每次迭代都会创建一个新函数。在你的函数中，这不会发生，因为你将函数传递给一个参数，所以有一个存储它的引用的地方（是函数参数），它会做这样的事情：

for (iterations)
{
    myob.addEventHandler(event, funcref);
}

所以应该没问题，现在：

不要这么认为，但不确定语法。
1正如我解释的那样
不，因为它在全局范围内并且未分配给实例，您可以将其视为常量，而不是变量

注意：匿名函数不会被释放，它被事件处理程序引用。

jQuery - 一旦将事件绑定到多个元素，每个元素的新实例？

问题

让我们做出改变

现在 - 更改后

3 个答案: