javascript - 无法将参数传递给函数 onmouseover - javascript

Question

在代码的顶部，我声明了对象表。然后，在函数 setup() 中，我试图为表中的每个对象添加 onmouseover 函数并将每个对象作为函数 pickUp(pick) 的参数传递，但随后我将鼠标悬停在该对象上，控制台显示“pick is不明确的”。这对我来说很奇怪，因为例如我传递了 pickUps[0] 而 typeof(pickUps[0]) 给了我“对象”。有人可以解释并帮助将每个对象作为参数传递吗？

代码:

var locked = "#4C8299";
var pickedUp = "#CC1B2B";
var released = "#19FFC8";

var pickUps = document.getElementsByClassName("pickUpSquare");

function pickUp(pick){
    if (pick.style.background == released){
        pick.style.background = pickedUp;
    }
}

function setup(){
    for (var i = 0; i < pickUps.length; i++){
        pickUps[i].onmouseover = function(){
            pickUp(pickUps[i]);
       }
    }   
}

window.onload = setup;

Answer 1

问题在于 setup 函数循环中的变量 i 是内部匿名函数定义的闭包 的一部分。 因此，在 pickUps[i] 被使用的那一刻， 循环早已结束，i 的值为 pickUps.length， 所以 pickUps[i] 的值是 undefined(它指向一个刚好超出数组边界的值)。

一种修复方法是使用返回函数的函数， 并将 i 或 pickUps[i] 作为参数传递给它:

pickUps[i].onmouseover = (function(pick) {
    return function() { pickUp(pick); }
})(pickUps[i]);

如果你可以使用 ES6，那么一个更简单的解决方案是在 for 循环中将 var i 替换为 let i (感谢 @alex-kudryashev ) .