将动态参数应用于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。

通常的方法是使用builder函数：

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

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

…或使用

功能#bind

：

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

---

无论哪种方式，您所做的都是创建一个新函数，当调用该函数时，使用传递的值调用

foo

。原始代码不起作用的原因是函数关闭在变量

someArg

上，而不是它在创建时的值。因此，由于它们在被调用时使用该值，因此无法获得所需的值。上述两种解决方案（以不同的方式）创建的函数都以函数创建时的值作为结束函数。

这是因为Javascript就是这样工作的。您必须使用不同的变量调用

foo（）

，才能实现这一点。我只看到一种解决方法

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

---

这是因为，foo将仅在调用

foo（）

时获取参数，并且该参数将是调用点处变量

someArg

的值。由于Javascript在页面加载时执行函数调用之外的所有操作，因此它将在页面加载时执行

someArg='Bye'

。

按照您的设置方式，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时在参数中使用'stuff ocated'

---

希望这能有所帮助。如果没有，请提供有关您的用例的更多详细信息，以便我们能够更集中地回答问题。

如果您使用下划线或Lodash，另一个做同样事情的替代方法是

。.partial（）

。非常感谢，这正是我要找的。也许我应该在OP中提到，我知道问题是什么，为什么会发生，我只是在寻找解决方案，但感谢您再次解释。这并不能解决我的问题，因为在我的情况下，someArg是一个循环变量，它会改变未知的次数，所以我不能对不同的赋值使用不同的变量名。但是你的帖子可能会说明为什么我的代码对不知道的人不起作用。