传递带有参数的函数作为参数？

Posted 2023-02-22

【中文标题】传递带有参数的函数作为参数？

【英文标题】：Passing a function with parameters as a parameter?

【发布时间】：2017-04-28 11:06:31

【问题描述】：

是否可以将带有参数的javascript函数作为参数传递？

例子：

$(edit_link).click( changeViewMode( myvar ) );

【问题讨论】：

它看起来像 JQuery，而且很可能是，但这无关紧要。不管你使用什么 Javascript 库，使用或参数和功能都是一样的。

如果您正在使用 React，请考虑 ***.com/questions/41369497/…

【参考方案1】：

使用“闭包”：

$(edit_link).click(function() return changeViewMode(myvar); );

这会创建一个匿名的临时函数包装器，它知道参数并将其传递给实际的回调实现。

【讨论】：

如果你想在一个对象上调用一个函数，你需要调用bind()。 myObj.click(function()this.doSomething();.bind(myObj));这将使“this”成为 myObj。

在处理大量此类问题时，这不是性能问题吗？例如。您正在连续渲染一个 onPress，并且您有 10,000 行。这将为每一行创建一个新的匿名临时函数包装器。还有其他方法吗？

@JoshuaPinter 技术本身不是问题。如果您需要 10,000 次相同的函数调用，您可以简单地将包装器保存在一个变量中，这样您只需创建一次。如果您需要传递 10,000 个不同的上下文，那么您无能为力。提防过早的优化：与性能一样，您需要测量以查看是否存在问题。今天的 JavaScript 引擎非常强大，可能会以惊人的方式优化代码。

@FerdinandBeyer 太棒了，感谢您的提示。一位朋友告诉我这是不好的做法，您应该在 constructor 方法中改用 this.myFunction = this.myFunction.bind(this)。但是，就像您说的那样，当您必须为每个行传递不同的上下文时，例如您单击以打开该行的详细信息页面的所有不同行，这是无法避免的。

@FerdinandBeyer ，假设 myvar 是一个字符串，它在两次连续调用 changeViewMode 作为闭包时发生了变化，但是 changeViewMode 总是接收 myvar 的第一个值，我想用不同的参数调用闭包函数分配给同一个 myvar 变量的值，

【参考方案2】：

是的，像这样：

$(edit_link).click(function()  changeViewMode(myvar) );

【参考方案3】：

不，但你可以不带参数传递一个，然后这样做：

$(edit_link).click(
  function()  changeViewMode(myvar); 
);

所以你传递了一个不带参数的匿名函数，然后该函数使用闭包中的变量调用你的参数化函数

【参考方案4】：

使用Function.prototype.bind()。引用 MDN：

bind() 方法创建一个新函数，在调用该函数时，将其 this 关键字设置为提供的值，在新函数被调用时，在任何提供的参数之前都有一个给定的参数序列调用。

所有主流浏览器都支持，包括IE9+。

您的代码应如下所示：

$(edit_link).click(changeViewMode.bind(null, myvar));

旁注：我假设您在全局上下文中，即this 变量是window；否则使用this 而不是null。

【讨论】：

谢谢，这对我有帮助。像这样使用它：$.ajax(url).done(handler.bind(this, var1, var2));

哪个选项最好？使用闭包还是使用绑定函数？如果有任何性能影响，请告诉我

@Varun 见Why is bind slower than a closure?

【参考方案5】：

你可以这样做

var message  = 'Hello World';

var callback = function()
alert(this)
.bind(message);

然后

function activate(callback)
  callback && callback();


activate(callback);

或者如果您的回调包含更灵活的逻辑，您可以传递对象。

Demo

【参考方案6】：

这是一个遵循 Ferdinand Beyer 方法的示例：

function function1()

    function2(function ()  function3("parameter value"); );

function function2(functionToBindOnClick)

    $(".myButton").click(functionToBindOnClick);

function function3(message)  alert(message); 

在本例中，“参数值”通过函数 2 使用函数包装从函数 1 传递到函数 3。

【参考方案7】：

或者如果你使用的是 es6，你应该可以使用箭头函数

$(edit_link).click(() => changeViewMode(myvar));