JavaScript 命名函数表达式

在JavaScript或任何编程语言中，函数、循环、数学运算符和变量是最常用的工具。本文将讨论在什么情况下可以使用命名函数表达式，并详细介绍了所有必要的概念。

命名函数： 在JavaScript中，使用函数关键字后跟一个可以作为回调函数的名称被称为使用命名函数。命名函数是具有名称或标识符的普通函数。它们在表达式中的使用和在语句中的声明都是可选的。函数的名称存储在函数的主体中，这是有用的。此外，我们可以使用名称来使函数调用自身或获取其特性，就像我们对任何对象都会做的一样。

语法：

var functionName(){
    // Code here
}

函数表达式： 函数表达式和函数声明的主要区别在于使用函数表达式可以定义匿名函数，而不需要函数名。即刻调用的函数表达式（IIFE）是在定义即刻执行的函数表达式。使用 variableName 关键字可以访问一个函数表达式，该函数表达式必须保存在变量中。得益于 ES6 引入了箭头函数，现在声明函数表达式更加简单。

语法：

var variableName = function () {    
    // Code here    
}

命名函数表达式： 这样，明显可以看出，有一个名称或标识符的函数表达式被称为命名函数表达式。在函数体内部绑定函数的名称可能会有所帮助。此外，我们可以通过使用函数名来调用函数自身，就像访问任何其他对象的属性一样访问函数的属性。

语法：

var variableName = function f(){
    // Code here
};

在语法示例中，f()函数仅在内部作用域内可用，要在内部作用域外调用该函数，我们需要使用variableName调用它。

命名函数表达式的用途是什么？

用于递归调用或距离事件监听器，以在其作用域内访问指定的函数。当使用命名函数时，调用堆栈和错误消息将显示更具体的信息。因此，通过减少匿名堆栈名称，可以增强调试体验。给函数命名可以使代码更易读、清晰，并帮助您传达意图。

例1： 下面的代码演示了如何创建一个递归的命名函数表达式并返回一个斐波那契数。

Javascript

<script> 
    var fibo = function fibonacci(number) { 
        if (number <= 1) return 1; 
            return fibonacci(number - 1) + fibonacci(number - 2); 
    }; 
    console.log(fibo(5)); 
</script>

输出：

示例2： 下面的代码演示了计算6的阶乘的函数，当点击按钮时调用该函数。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h2><b>Named function expression in JavaScript.</b></h2> 
    <div class="result"
         style="font-size: 40px; color: green;"> 
      </div> 
    <br /> 
    <button class="btn">CLICK HERE</button> 
    <h3>Click on the button to call the factorial function  
          expression of obj object <br>And also get the 
          result of the factorial of 6. 
    </h3> 
    <script> 
        let ele = document.querySelector(".result"); 
        let BtEle = document.querySelector(".btn"); 
        let obj = { 
            factorial: function fact(n) { 
                if (n <= 1) { 
                    return 1; 
                } 
                return n * fact(n - 1); 
            }, 
        }; 
        BtEle.addEventListener("click", () => { 
            ele.innerHTML = obj.factorial(6); 
        }); 
    </script> 
</body> 
  
</html>