函数声明和函数表达式：重新理解，拨云见日！

2023-11-27 02:47:37

函数声明和函数表达式：拨开迷雾，重新理解！

最近，我收到了学弟发来的一张图，标题是“函数声明和函数表达式”。我点开一看，这不是函数声明跟函数表达式的知识点吗？前一阵子还看过相关文章。看了几眼，我说到：“第一个输出应该是最后的函数声明” 然后呢？没有然后了，真的，犹豫代表着此时的我不会。

函数声明和函数表达式是 JavaScript 中定义函数的两种方式。它们有着不同的语法和用法，在不同的场景下使用。本文将深入探讨函数声明和函数表达式的区别，并通过生动的例子说明它们的使用场景。了解这些知识，将帮助您成为一名更优秀的 JavaScript 开发者。

函数声明

函数声明使用function来定义，后面跟上函数名和圆括号。函数体使用大括号括起来。

function greet(name) {
  console.log('Hello, ' + name + '!');
}

函数声明可以出现在代码的任何位置，只要在函数被调用之前声明即可。函数声明会将函数提升到当前作用域的顶部，因此可以在函数声明之前调用该函数。

函数表达式

函数表达式使用箭头函数或function关键字来定义。箭头函数使用=>符号，后面跟上函数体。function关键字定义的函数表达式则与函数声明类似，只是没有函数名。

const greet = (name) => {
  console.log('Hello, ' + name + '!');
};

const greet2 = function(name) {
  console.log('Hello, ' + name + '!');
};

函数表达式只能出现在代码的块级作用域内，例如函数体、循环体或if语句块中。函数表达式不会将函数提升到当前作用域的顶部，因此必须在函数表达式之后才能调用该函数。

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

函数声明和函数表达式在以下几点上有区别：

语法：函数声明使用function关键字来定义，而函数表达式使用箭头函数或function关键字来定义。
作用域：函数声明可以出现在代码的任何位置，只要在函数被调用之前声明即可。函数表达式只能出现在代码的块级作用域内。
提升：函数声明会将函数提升到当前作用域的顶部，因此可以在函数声明之前调用该函数。函数表达式不会将函数提升到当前作用域的顶部，因此必须在函数表达式之后才能调用该函数。

函数声明和函数表达式的使用场景

函数声明和函数表达式在不同的场景下使用。

函数声明通常用于定义全局函数或类方法。
函数表达式通常用于定义匿名函数或闭包。

例如，以下代码使用函数声明定义了一个全局函数：

function greet(name) {
  console.log('Hello, ' + name + '!');
}

以下代码使用函数表达式定义了一个匿名函数：

const greet = (name) => {
  console.log('Hello, ' + name + '!');
};

以下代码使用函数表达式定义了一个闭包：

function outer() {
  const name = 'John Doe';

  return function inner() {
    console.log('Hello, ' + name + '!');
  };
}

const greet = outer();
greet(); // 输出：Hello, John Doe!