如何使用字典在 JavaScript 返回值中实现回调答案

【问题标题】：How to Implement a Callback in JavaScript return Value with a Dictionary如何使用字典在 JavaScript 返回值中实现回调
【发布时间】：2020-12-30 02:36:02
【问题描述】：

我正在尝试实现一个具有键和值的 JS 字典，其中值调用回调函数进行验证。

例如，我尝试定义一个 animalsDict 字典。当我尝试调用“Dog”键调用值 validateDogSound() 回调函数时，bootbox.alert 不显示。

我做错了什么？这就是我们在字典中做回调函数的方式吗？任何提示或帮助？谢谢

var animalsDict = {
    Dog: validateDogSound(),
  //Cat: validateCatSound(), 
  //Bird: ... etc
}

function validateDogSound(){
 bootbox.alert("dogs bark!");  
 return false;
}

console.log('testDog', animalsDict["Dog"]);

【问题讨论】：

如果你想引用这个函数，你需要做类似var animalsDict = { Dog: validateDogSound }的事情，然后当你想调用它时，你可以做animalsDict["Dog"]()

标签： javascript dictionary callback alert bootbox

【解决方案1】：

您需要调用该函数：

console.log('testDog', animalsDict["Dog"]());
//                                       ^

同时将对象更改为

var animalsDict = {
    Dog: validateDogSound,
  //Cat: validateCatSound, 
  //Bird: ... etc
}

【讨论】：

我建议接受这个答案而不是另一个答案，您绝对不需要在使用函数之前需要声明它们（至少对于函数声明，函数表达式是另一回事)

【解决方案2】：

根据documentation，需要按以下顺序加载javascript库。

由于 Bootbox 是 Bootstrap 模式功能的包装器，因此您需要按顺序包含库：
jQuery
Popper.js
Bootstrap
Bootbox
Bootbox Locales (optional - omit if you only need the default English locale)

尝试以相同的顺序添加这些标题或使用以下内容。我在标题中添加了以下内容，看起来它有效。你会更清楚。 请注意，我没有验证网址，这只是为了演示。如果您的服务器上有这些网址的本地副本并在头部适当地引用，那就更好了。

<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
</head>
<body>
<script>
var animalsDict = {
    Dog: validateDogSound(),
  //Cat: validateCatSound(), 
  //Bird: ... etc
}

function validateDogSound(){
 bootbox.alert("dogs bark!");  
 return false;
}

console.log('testDog', animalsDict["Dog"]);
</script>

</body>
</html>

【讨论】：

【解决方案3】：

这边


// "functions" first !

var validateDogSound = function()  
  {
  bootbox.alert("dogs bark!");  
  return false;
  }


var animalsDict = {
    Dog: validateDogSound ,  // no parenthesis
  //Cat: validateCatSound , 
  //Bird: ... etc
}
console.log('testDog', animalsDict["Dog"]() );  // with parenthesis

【讨论】：

为什么要先发挥作用？
感谢您的故障和cmets！
@Nick 你是对的，在这种情况下这会起作用，但如果她使用复杂的对象调用，这是唯一的方法
什么是复杂对象调用？
@Nick Objects with methods，我也把函数改成了const