JavaScript函数声明与函数表达式的区别及命名函数表达式解析

函数声明与表达式的基本定义

函数表达式和函数声明

在ECMAScript规范中，定义函数主要依赖两种形式：函数表达式和函数声明。初学者常对两者的区别感到困惑，因为规范仅明确了一条规则：函数声明必须包含标识符（即函数名），而函数表达式则允许省略该标识符。

函数声明的标准语法如下：

function 函数名称 (参数：可选){ 函数体 }

函数表达式的语法结构为：

function 函数名称（可选）(参数：可选){ 函数体 }

由此可知，若未指定函数名称，则必为表达式；若指定了名称，如何区分二者？ECMAScript依据上下文判断：若 `function foo(){} ` 作为赋值语句的一部分，则为函数表达式；若其位于程序顶层或嵌套在另一个函数体内，则为函数声明。

 function foo(){} // 声明，因为它是程序的一部分
 var bar = function foo(){}; // 表达式，因为它是赋值表达式的一部分
 new function bar(){}; // 表达式，因为它是new表达式
 (function(){
  function bar(){} // 声明，因为它是函数体的一部分
 })();

此外，存在一种较少见的函数表达式形式，即用圆括号包裹的代码块 `(function foo(){})`。由于圆括号 `()` 是分组操作符，其内部必须包含表达式，因此被包裹的函数定义被视为表达式。参考以下示例：

function foo(){} // 函数声明 (function foo(){}); // 函数表达式：包含在分组操作符内

命名函数表达式的作用域与调试价值

命名函数表达式

顾名思义，命名函数表达式必须拥有名称。例如 `var bar = function foo(){};` 是合法的命名函数表达式。需注意，根据规范，该名称仅在函数内部作用域有效，外部作用域无法访问该标识符。

 var f = function foo(){
  return typeof foo; // foo是在内部作用域内有效
 };
 // foo在外部用于是不可见的
 console.log(typeof foo); // "undefined"
 console.log(f()); // "function"
var f = function foo(){
return foo; // foo是在内部作用域内有效
};
// foo在外部用于是不可见的
console.log(typeof foo); // "undefined"
console.log( f()==f); // "function"
console.log(f.name);//foo

既然名称对外不可见，命名函数表达式的实际用途是什么？

其主要价值在于优化调试体验。当在调用栈中查看函数时，若每个栈帧都显示明确的名称，将极大提升调试效率，使问题定位更加直观。

函数提升机制与调用差异

ps：JS中函数声明与函数表达式的不同

JavaScript中的函数声明采用以下标准形式：

function functionName(){ 
} 

此类方式用于声明函数，而函数表达式则采用类似变量赋值的表达式形式来定义函数，例如：

     var functionName = function(){ 
}

许多开发者面对这两种写法时可能产生疑惑，认为它们在应用中均可行且差异不大，那么它们究竟有何不同？

事实上，JavaScript解析器对函数声明和函数表达式的处理机制截然不同。对于函数声明，解析器会优先读取并解析，确保在所有代码执行前完成声明；而函数表达式如同定义基本类型变量，仅在执行到该行时才进行解析。因此，使用函数声明定义时，调用语句可置于声明之前；若对函数表达式这样做，则会引发错误。