javascript - 将动态参数应用于JavaScript函数，但延迟调用

考虑以下JavaScript代码：

var someArg = "Hello";
elem1.onclick = function() { foo(someArg); };
someArg = "Bye";
elem2.onclick = function() { foo(someArg); };

当我单击elem1时，我想用参数“ Hello”调用foo，但是，以上代码的工作方式是，每次都用“ Bye”调用foo。

基本上，我想将someArg应用于foo，但直到稍后才真正调用foo。

最佳答案

通常的方法是使用构建器函数：

var someArg = "Hello";
elem1.onclick = buildHandler(someArg);
someArg = "Bye";
elem2.onclick = buildHandler(someArg);

function buildHandler(arg) {
    return function() { foo(arg); };;
}

...或使用Function#bind：

var someArg = "Hello";
elem1.onclick = foo.bind(null, someArg);
someArg = "Bye";
elem2.onclick = foo.bind(null, someArg);

无论哪种方式，您所做的都是创建一个新函数，该函数在被调用时会使用您传递的值调用foo。您的原始代码不起作用的原因是这些函数关闭了变量someArg，而不是创建时的值。因此，由于它们在被调用时会使用该值，因此您不会获得所需的值。上面的两个解决方案（以不同的方式）都创建了一些函数，这些函数在创建函数时关闭了采用该值的对象。