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

Question

考虑这段 JavaScript 代码:

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

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

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

Answer 1

执行此操作的通常方法是使用构建器函数:

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。您的原始代码不起作用的原因是函数关闭了 variable someArg，而不是它们创建时的值。因此，由于它们在调用时使用了该值，因此您无法获得所需的值。上面的两种解决方案(以不同的方式)创建函数来关闭某些东西，取而代之的是创建函数时的值。