当函数绑定到多个链接时，JavaScript/Jquery的解释性质是否会增加代码大小？

我在一个表中有许多URL（50个或更多）。我通过选择其父类下的所有锚定标记来重载每个链接的单击事件

$(".mapURL a").click(function(e) {
    e.preventDefault();
    var url = ($(this).attr('href'));
    fetchMapByURL(url);
});

由于解释语言中的JavaScript，这是否意味着将生成50次以下代码（与每个锚标记绑定），从而使其效率低下，并增加客户端的内存使用量

编辑-函数fetchMapByURL（url）是一个较大的函数（30行），它对API进行ajax调用，以获取图像并将其加载到画布上。我还是不该为此烦恼吗

请用尽可能多的技术细节详细说明您的答案

JavaScript的解释性质是否

JavaScript不是天生的“解释”。只是在普通环境（浏览器、节点）中，它是以源代码形式传递到目标环境的。只要有好处，所有现代JavaScript引擎都会将代码编译成机器代码。至少还有一个JavaScript编译器允许您编译源代码，并将字节码而不是源代码发送到目标环境（在这种情况下，Rhino编译器——现在有点过时了——针对JVM）

…这是否意味着以下代码将生成50次

不，在该代码中，有一个处理函数附加到50个元素，而不是50个单独的处理函数

即使您使用了错误的方法并创建了50个函数：

// WRONG, for illustration purposes
$(".mapURL a").each(function() {
    $(this).click(function(e) {
        e.preventDefault();
        var url = ($(this).attr('href'));
        fetchMapByURL(url);
    });
});

…虽然将创建50个不同的函数对象（每个函数对象占用少量内存），但JavaScript引擎将在这50个函数对象之间重用代码。（这里的代码非常小，可能没有什么好处，但是…）

但50个功能对象没什么大不了的；我们在JavaScript中到处使用对象，它们是高度优化的对象，基线足迹很小。在大多数现代环境中，如果不是几十万，至少要达到几十万，它才会出现在您的性能指标中，成为您非常担心的事情

但这对于代码来说并不重要，因为代码中只有一个处理函数可以跨元素重用

---

函数

fetchMapByURL（url）

是一个更大的函数，它对API进行ajax调用，以获取图像并将其加载到画布上。我还是不该为此烦恼吗

您的处理程序正在调用该函数。不管函数从多少个不同的地方调用，仍然只有一个副本（除非您创建更多副本，请参见上面的“错误”）

JavaScript的解释性质是否

JavaScript不是天生的“解释”。只是在普通环境（浏览器、节点）中，它是以源代码形式传递到目标环境的。只要有好处，所有现代JavaScript引擎都会将代码编译成机器代码。至少还有一个JavaScript编译器允许您编译源代码，并将字节码而不是源代码发送到目标环境（在这种情况下，Rhino编译器——现在有点过时了——针对JVM）

…这是否意味着以下代码将生成50次

不，在该代码中，有一个处理函数附加到50个元素，而不是50个单独的处理函数

即使您使用了错误的方法并创建了50个函数：

// WRONG, for illustration purposes
$(".mapURL a").each(function() {
    $(this).click(function(e) {
        e.preventDefault();
        var url = ($(this).attr('href'));
        fetchMapByURL(url);
    });
});

…虽然将创建50个不同的函数对象（每个函数对象占用少量内存），但JavaScript引擎将在这50个函数对象之间重用代码。（这里的代码非常小，可能没有什么好处，但是…）

但50个功能对象没什么大不了的；我们在JavaScript中到处使用对象，它们是高度优化的对象，基线足迹很小。在大多数现代环境中，如果不是几十万，至少要达到几十万，它才会出现在您的性能指标中，成为您非常担心的事情

但这对于代码来说并不重要，因为代码中只有一个处理函数可以跨元素重用

---

函数

fetchMapByURL（url）

是一个更大的函数，它对API进行ajax调用，以获取图像并将其加载到画布上。我还是不该为此烦恼吗

---

您的处理程序正在调用该函数。不管从多少不同的地方调用函数，仍然只有一个副本（除非您创建更多副本，请参见上面的“错误”）

jQuery不是一种语言。它只是一个库（里面有很多预构建的函数）。是的，它的意思是。然而，50个元素没有什么可担心的。您通常不会注意到事件处理程序中多达数千个元素的问题，这取决于客户机的规范。如果您非常关心它，您可以在父元素上使用单个委托事件处理程序来实现这一点，但是您需要小心事件冒泡。@Rorymcrossan:上面只有一个函数，而不是50。对，但它被添加到DOM中与

.mapURL a

匹配的每个元素中，因此它被添加到了一个元素次。请参阅（）上的

each（）

方法底部的

each（）。诚然，浏览器可能足够聪明，可以识别多次应用的相同函数逻辑，但jQuery似乎不是，不过。@RoryMcCrossan:再次：50个引用，而不是50个函数。我确信您理解
$（…）之间的区别。每个（函数（）{$（this）。单击（函数（）{…}）；}）
，它在每次迭代中创建一个新函数，并且在

上的中的每个都会重用该函数。该代码中的每个

都不会创建新函数。jQuery不是一种语言。是的