JavaScript函数声明和函数表达式的区别

JavaScript中定义函数有两种方式：函数声明和函数表达式。虽然它们在外观上相似，但它们之间有许多关键差异。下面将详细介绍这两种方式的区别。

函数声明

函数声明是一种定义函数的方式，它使用关键字 function 以及函数名来创建函数。函数声明的语法如下：

function functionName(parameter1, parameter2, ...) {
  // function body
}

其中：

• functionName 是函数的名称；
• parameter1, parameter2, ... 是函数的参数列表；
• function body 是函数体。

函数声明可以在脚本的任何位置进行定义，它们在声明函数之后就可以直接调用。由于函数声明会被声明提升，因此它们可以在声明之前被调用。

下面是一个函数声明的示例：

function add(x, y) {
  return x + y;
}

函数表达式

函数表达式是通过变量来保存函数的方式。函数表达式的语法如下：

var functionName = function(parameter1, parameter2, ...) {
  // function body
};

其中：

• functionName 是变量名，它保存函数；
• parameter1, parameter2, ... 是函数的参数列表；
• function body 是函数体。

函数表达式必须在它们被定义之后才能调用。由于函数表达式不会被声明提升，因此必须在它们被定义之后才能调用。

下面是一个函数表达式的示例：

var add = function(x, y) {
  return x + y;
};

区别

主要区别在于它们的声明方式和声明的提升情况。

函数声明的方式是一个直接声明。而函数表达式是声明一个变量，并将其赋值为一个函数。

当JS运行一个文件时，它会分两个阶段处理变量和函数孑然。第一个阶段中，JS会扫描整个文件并寻看到所有可用顶级函数（即不包含在其他函数体内的函数），并进行函数提升（Hoisting）。

因此，即使函数位于代码尾部，也能先行使用函数。而函数表达式不能用于这个目的，因为它们是运行时定义的，而不是定义时。

下面是函数声明和函数表达式在声明提升方面的不同之处的示例：

console.log(add(2, 3)); // Prints 5

function add(x, y) {
  return x + y;
}

console.log(sub(2, 3)); // Throws "Uncaught ReferenceError: subtract is not defined"

var sub = function(x, y) {
  return x - y;
};

在这个示例中，函数 add 是使用函数声明方式定义的。由于函数声明会被声明提升，因此我们在函数声明之前调用它，并最终正确地输出 5。

相反，变量 sub 是使用函数表达式定义的。由于函数表达式不能被声明提升，因此我们在变量 sub 被定义之前调用它，并抛出了一个 Uncaught ReferenceError。

在基本使用方面，函数声明和函数表达式的区别不大，它们在创建和使用函数时的定义方式不一样，而这影响它们在代码执行时的处理方式。