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

Question

我的表中有很多网址(50 个或更多)。我通过选择其父类下的所有 anchor 标记来重载每个链接的点击事件。

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

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

Edit - The function fetchMapByURL(url) is a larger function (30 lines) that makes a ajax call to an API to get an image and load it on the canvas. Should I still not be bother about it?

请用尽可能多的技术细节详细阐述您的答案。

Answer 1

Does the interpreted nature of JavaScript...

JavaScript 本质上不是“解释”的。只是在通用环境(浏览器、Node)中，是以源形式传递到目标环境的。只要这样做有好处，所有现代 JavaScript 引擎都会将代码编译为机器代码。 至少还有一个 JavaScript 编译器，可以让您编译源代码并将字节码而不是源代码发送到目标环境(在这种情况下，Rhino 编译器 - 现在有点过时了 - 针对 JVM)。

...does this imply that the following piece of code would be generated 50 times...

不，您有一个处理程序函数附加到该代码中的 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 中到处使用对象，它们是高度优化的东西，具有较小的基线足迹。在大多数现代环境中，您必须关注至少数十万(如果不是数十万)，它才会出现在您的性能指标中，成为值得担心的事情。

但这对于您的代码来说并不重要，因为它只有一个跨元素重用的处理函数。

<小时/>

The function fetchMapByURL(url) is a larger function that makes a ajax call to an API to get an image and load it on the canvas. Should I still not be bother about it?

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