实现闭包以将数组索引“携带”到另一个数组？ [重复]

Question

这个问题已经在这里有了答案：

• 如何在Javascript中使用循环生成事件处理程序？ [重复] 3个答案

根据我在这里收到的答案，看来我需要关闭此代码才能正常工作。 不幸的是，尽管提供了链接，但对于我应该如何实施关闭操作，我仍然感到困惑，因此，当单击特定图像时，将打开该图像唯一的特定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完成此Function#bind ，该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 ：

 // 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);
        };
    }
});