javascript - .bind 有问题

Question

我有以下内容：

for( var i=0; i<array.length; i++) {
   if(array[i] instanceof Buff) {
   someDiv[i].onclick = buffTest.bind(i);
   }
}

我真的很想做类似的事情，someDiv[i].onclick = function() { buffTest(i) };但为了真正了解问题所在并改进，我想了解我做错了什么。我是否以某种方式使用了错误的绑定？我忘了说，我遇到的问题是：

function buffTest(yy){
console.log(yy);
}

console.log 返回一个 MouseEvent 而不是 i 中的数字。非常感谢您对此事的任何帮助，提前感谢您提供的任何信息。

Answer 1

这可能只是因为第一个参数bind是this值。

你可能想要这个：

someDiv[i].onclick = buffTest.bind(someDiv[i], i);

编辑：就像@bfavarette 所说，如果您不介意this监听器中的内容，您也可以传递null而不是someDiv[i]，但是由于使用此方法附加事件监听器时，您希望this成为附加监听器的对象，我在我提供的示例中坚持这种行为。

Answer 2

bind做两项工作：它在this稍后调用函数时设置函数的值，并预填充函数参数。如果您只想设置该this值，请将其作为第一个参数传递。第一个参数之后的任何参数都用于“预填充”函数参数。

在您的情况下，您只想预填充参数，因此将第一个参数设置为bindtonull或window其他任何内容。i应该是第二个参数。

buffTest.bind(
  null, // doesn't matter
  i     // pre-fills the first argument to buffTest
)

Answer 3

尝试这个。

function makeTest(i) {
    return function () {
        buffTest(i);
    };
}

for (var i = 0; i < array.length; i++) {
    if (array[i] instanceof Buff) {
        someDiv[i].onclick = makeTest(i);
    }
}