如何使用变量名加载 JavaScript 函数?

javascriptweb developmentfront end technology

在本教程中，我们将学习使用变量名加载 JavaScript 函数。

函数是接受输入并在执行后向用户显示结果的语句块。我们可以通过仅声明函数来重复使用这些代码块，这些函数可以在很多方面帮助程序员，因为它还可以减少工作量。

JavaScript 也支持像其他编程语言一样使用函数。JavaScript 中的函数可以是内置的，也可以是用户定义的。

声明和调用函数的方法有很多种。通常，一个简单的函数使用它的名称在程序的任何地方调用自己。但也有其他方法可以调用函数。让我们看看如何使用变量名加载 JavaScript 函数。

以下是允许我们使用变量名加载 JavaScript 函数的函数类型:

匿名函数

匿名函数

通常，我们为函数分配一个名称。匿名函数是没有名称的函数。我们只使用带括号的 function 关键字来声明匿名函数而不添加名称。

我们不能仅通过声明来访问匿名函数。我们必须将此函数作为值存储在变量中。然后，我们可以使用该变量调用函数。用户可以按照下面给出的语法使用匿名函数通过变量名称加载 JavaScript 函数 -

语法

function() {
// 函数主体
}
//使用箭头函数
var var1= ()=>{
// 函数主体
};
// 调用函数
var var_name=function() {
// 函数主体
};
var_name();

示例 1

在示例中，我们使用匿名函数通过变量名称加载 JavaScript 函数。


<html>
<body>
   <p> Use <i> Anonymous function </i>to load a JavaScript function using
   the name of a variable. </p>
   <div id="div1"></div>
   <script>
      var anonymous = function() {
         return "This is anonymous function";
      };
      document.getElementById("div1").innerHTML = anonymous();
   </script>
</body>
</html>

在输出中，您可以看到我们已使用匿名函数通过变量名称加载 JavaScript 函数。

示例 2

在此示例中，我们已使用箭头函数的匿名函数通过变量名称加载 JavaScript 函数。


<html>
<body>
   <div id = "div1"></div>
   <script>
      var divide = ()=> {
         return 34/12;
      };
      document.getElementById("div1").innerHTML = divide();
   </script>
</body>
</html>

在这里您可以看到，我们已将匿名函数与箭头函数结合使用，以使用变量名称加载 JavaScript 函数。

示例 3

在示例中，我们已使用匿名函数通过单击按钮以使用变量名称加载 JavaScript 函数。


<html>
<body>
   <p> Click the "Click here" button to execute anonymous fucntion </p>
   <button onclick = "anonymous()">Click here</button>
   <div id="div1"></div>
   <script>
      var element = document.getElementById("div1");
      var anonymous = function() {
         var new_element = document.createElement('p');
         var text = document.createTextNode("Executing Anonymous function
         on click");
         new_element.appendChild(text);
         element.appendChild(new_element);
      };
   </script>
</body>
</html>