如何在 JavaScript 中将函数用作变量？答案

【问题标题】：How do I use a function as a variable in JavaScript?如何在 JavaScript 中将函数用作变量？
【发布时间】：2016-04-26 17:47:14
【问题描述】：

我希望能够将代码放在一个地方并从几个不同的事件中调用它。

目前我有一个选择器和一个事件：

$("input[type='checkbox']").on('click', function () {
  // code works here //
});

我在文件的其他地方使用了相同的代码，但是使用了不同的选择器。

$(".product_table").on('change', '.edit_quantity', function () {
  // code works here //
});

我尝试按照 StackOverflow 上其他地方的建议，简单地给我的函数命名，然后调用命名函数，但这对我不起作用。代码根本无法运行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals() {
    // code does not work //
  }
});

所以，我尝试将代码放入与事件分开的自己的函数中，并在事件中调用它，但这对我也不起作用。

calculateTotals() {
  // code does not work //
}

那么我做错了什么？

【问题讨论】：

为什么不只是calculateTotals()
为什么要在事件处理程序中定义一个函数？语法太错误了。
在事件处理程序之外定义函数：function calculateTotals() {}。然后你可以在你的事件处理程序中调用calculateTotals()。
@ÖzgürErsil 感谢您的反馈 - 抱歉，我是 JS 新手。我不确定我是否理解你的评论。我尝试将代码放在它自己的函数中，然后在单击事件后触发它，但它不起作用。

标签： javascript jquery function variables events

【解决方案1】：

您可以将函数作为变量传递。

您想在 DOM 加载后为事件添加监听器，JQuery 可以帮助$(document).ready(fn); (ref)。

修复您的代码：

 $(document).ready(function() {
   $("input[type='checkbox']").on('click', calculateTotalsEvent)
   $(".product_table").on('change', '.edit_quantity', calculateTotalsEvent)
 });

 function calculateTotalsEvent(evt) {
   //do something 
   alert('fired');
 }

更新：
文斯问：

这对我有用 - 谢谢你，但是有一个问题：你说，“将你的函数作为变量传递”......我看不出你在哪里做这个。你可以解释吗？ tks。 – Vince

回应：
在 JavaScript 中，您可以将函数分配给变量。你可能在做的时候一直这样做：

function hello() {
  //
}

你定义window.hello。
您正在添加到全局命名空间。
JavaScript window object
这通常会导致模棱两可的 JavaScript 架构/意大利面条式代码。
我使用命名空间结构进行组织。
一个小例子是：

app.js

var app = {
  controllers: {}
};

您正在定义 window.app（只是一个 json 对象），键为 controllers，值为对象。

something-ctlr.js

app.controllers.somethingCtlr.eventName = function(evt) {
  //evt.preventDefault?
  //check origin of evt? switch? throw if no evt? test using instanceof?
  alert('hi');
}

您在之前定义的app.controllers.somethingCtlr称为eventName 上定义一个新键。

您可以使用(); 调用该函数。

app.controllers.somethingCtlr.eventName();

这将转到对象中的键，然后调用它。您可以像这样将函数作为变量传递。

anotherFunction(app.controllers.somethingCtlr.eventName);

然后你可以像这样在函数中调用它

function anotherFunction(someFn) { someFn();}

javascript 文件的结构如下：

  +-html
  +-stylesheets
  +-javascript-+
               +-app-+
                     +-app.js
                     +-controllers-+
                                   +-something-ctlr.js

通过chrome developer tools 调用：

app.controllers.somethingCtlr.eventName();

您可以像这样将它作为变量传递：

$(document).ready(function() {
  $('button').click(app.controllers.somethingCtlr.eventName);
});

JQuery (ref)。

我希望这会有所帮助，里斯

【讨论】：

这对我有用 - 谢谢你，但是有一个问题：你说，“将你的函数作为变量传递”......我看不出你在哪里做这个。你可以解释吗？ tks.
详细说明，在我的一个事件中，我不得不使用这个语法来使其工作：" $("input[type='checkbox']").on('click',calculateTotals( ),function() { $(this).closest("tr.delete_row").remove(); "
Javascript 中的函数就是我们所说的“第一类对象”。这意味着函数是一个可以传递并分配给变量的对象。在您提供的示例中，您正在创建一个函数并立即将其传递给调用，就像您对“单击”所做的那样。您也可以拨打var c = 'click'; $('input').on(c, ...etc
任何你可以给变量赋值的地方，你也可以给它一个函数，任何你可以使用变量的地方，你都可以使用一个分配了函数的变量。 var x = function() {}; 与说 var x = 5; 没有什么不同
我已经更新了我的答案以回应您的评论@Vince

【解决方案2】：

看起来您在正确的轨道上，但有一些不正确的语法。调用函数时不需要{ }。在 calculateTotals 函数内添加代码后，此代码应该会正常运行。

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals();
});

$("input[type='checkbox']").on('click',function() {
  calculateTotals();
});

function calculateTotals() {
  //your code...
}

【讨论】：

出于某种原因，我已经尝试过您的方法，但无法成功 - 但是感谢您的反馈！

【解决方案3】：

您可以将其全部压缩为一个函数。 onchange 事件适用于复选框和文本输入（不需要单击处理程序）。并且 jQuery 允许你添加多个选择器。

$('input[type=checkbox], .product_table .edit_quantity').on('change', function() {

  console.log('do some calculation...');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="product_table">
  <input type="checkbox">
  <input class="edit_quantity">
</div>

【讨论】：