如何在 JavaScript 中使用函数作为变量

How do I use a function as a variable in JavaScript?

本文关键字：函数 变量 JavaScript      更新时间：2023-09-26

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

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

$("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 //
}

那我做错了什么？

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

你想在 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');
 }

更新：
文斯问道：

这对我有用 - 谢谢你，但是一个问题：你说，"将你的函数作为变量传递"......我不明白你在哪里做这件事。你能解释一下吗？啧啧。–文 斯

响应：
在 JavaScript 中，你可以将函数分配给变量。在执行以下操作时，您可能一直这样做：

function hello() {
  //
}

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

应用.js

var app = {
  controllers: {}
};

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

东西-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 开发者工具调用：

app.controllers.somethingCtlr.eventName（）;

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

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

JQuery （参考资料）.

我希望这有帮助，里斯

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

$(".product_table").on('change', '.edit_quantity', function () {
  calculateTotals();
});
$("input[type='checkbox']").on('click',function() {
  calculateTotals();
});
function calculateTotals() {
  //your code...
}

你可以把它全部压缩到一个函数中。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>

相关文章：