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并传递它。原始代码不起作用的原因是函数关闭变量 someArg，而不是它们创建时的值。因此，因为他们在调用时使用该值，所以您无法获得所需的值。上面的两个解决方案（以不同的方式）创建了一些函数，这些函数可以在创建函数时创建值。

Answer 2

这是因为，这就是Javascript的工作原理。您必须使用不同的变量调用foo()才能实现此目的。我只看到一个解决方法..

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

这是因为，只有在调用foo()时foo才会获取参数，并且参数将是调用点处变量someArg的值。由于Javascript在页面加载时执行函数调用之外的所有内容，因此它也会在页面加载时执行someArg = 'Bye'。

Answer 3

你设置它的方式，javascript正在改变加载时someArg的定义，几乎在它第一次定义之后立即改变。你需要使用另一个变量：

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

或将变量传递给函数并在其他地方定义该变量：

elem1.onclick = function(someArg) { foo(someArg); };
elem2.onclick = function(someArg) { foo(someArg); };
//Some stuff happens....
thisVariable = 'stuff happened';
elem2.onclick(thisVariable);

这将导致在参数中发生'发生的事情'来调用foo。

希望这会有所帮助。如果没有，请提供有关您的用例的更多详细信息，以便我们可以更多地关注我们的答案。

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

3 个答案: