javascript - 实现对另一个数组的数组索引 "carry"的闭包？

Question

这个问题已经有答案了:

How to generate event handlers with loop in Javascript? [duplicate] (3 个回答)

已关闭 8 年前。

基于答案我received在这里，我似乎需要一个闭包才能使该代码正常工作。不幸的是，尽管提供了链接，但我仍然对如何在我的情况下实现闭包感到困惑，因此当单击特定图像时，将打开该图像唯一的特定 URL。 (目前，我只是得到一个“未定义”，因为正如 Pointy 所说，““i”的值将是 links.length”。)

简而言之，我如何将“i”的数字/索引“携带”到“window.location.replace(pages[]);”，如果在这种情况下闭包确实正确，那么如何我用一个吗？

我讨厌继续打扰别人，但我认为我自己无法解决这个问题。谢谢。

原始代码:

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
        for (var i=0; i<links.length; i++) {
            //for (var e=0; e<pages.length; e++) {
                $(links[i]).click(function() {
                    window.location.replace(pages[i]);
                });
            //}
        }
    });

Answer 1

您可以使用 Function#bind 来完成此操作，这是一项 ES5 功能，可以在旧版浏览器上进行调整，如下所示:

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
    for (var i=0; i<links.length; i++) {
        //for (var e=0; e<pages.length; e++) {
            $(links[i]).click(function(page) { // 1. Accept argument into function
                window.location.replace(page); // 2. Use the argument
            }.bind(null, pages[i]));           // 3. Use Function#bind to bind the argument
        //}
     }
});

Function#bind 返回一个函数，当调用该函数时，将使用特定的 this 值(我们在这里不关心)和任何值来调用原始函数。您绑定(bind)到它的参数(后跟实际调用新函数时给出的任何参数)。

一个更简单的示例可能有助于理解更多绑定(bind):

// A function that shows its arguments
function foo(a, b, c) {
    display("a = " + a);
    display("b = " + b);
    display("c = " + c);
}

// Get a function with an argument bound to it
var f = foo.bind(null, 1);

// Call the function -- notice how we get the bound
// argument first, then the ones we supply with the
// call
f(2, 3);

// Just a utility display function
function display(msg) {
  document.body.insertAdjacentHTML(
    "beforeend",
    "<p>" + msg + "</p>"
  );
}

<小时/>

如果您想在没有 bind 的情况下完成此操作，我通常建议您重用一个单独的构建器函数(而不是在每次循环迭代时创建并丢弃构建器函数):

var links = ["#portfolio", "#animations", "#games"];
var pages = ["http://www.gog.com", "http://www.google.com", "http://www.hamumu.com"];

$(function() {
    for (var i=0; i<links.length; i++) {
        //for (var e=0; e<pages.length; e++) {
            $(links[i]).click(makeClickHandler(pages[i]));
        //}
    }

    function makeClickHandler(page)
        return function() {
            window.location.replace(page);
        };
    }
});