何时在JavaScript中使用函数声明vs函数表达式？

这篇文章只是我为那些有时会忘记这两个概念的开发者准备的快速笔记：函数声明和函数表达式，这样每次他们需要回忆时，可以来这里复习，而不必再去谷歌搜索。

当然，那些每天使用JavaScript工作的人会用以下语法编写许多函数：

function doSomething() {} // 函数声明
 
// 或者
let doSomething = function () {} // 函数表达式
 
// 或者
let doSomething = () => {} // 函数表达式

第一种写法是函数声明，后两种是函数表达式。那么它们之间有什么区别，我们该如何使用它们呢？

定义

第一个区别是如何定义一个函数。

function doSomething() {}

let doSomething = function () {}
 
// ES6语法的匿名函数
let doSomething = () => {}

提升是JavaScript的一种机制，它在代码执行前将函数和变量提升到作用域的顶部。

提升只适用于函数声明，不适用于函数表达式。

你可以通过以下示例简单理解：

sayHello() // => "Hello"
 
function sayHello() {
  console.log('Hello')
}

你可以在初始化的作用域中的任何地方调用函数声明。

然而，函数表达式只能在定义后调用。

sayHello() // => Uncaught ReferenceError: Cannot access 'sayHello' before initialization
 
let sayHello = function () {
  console.log('Hello')
}

根据开发者的习惯以及项目或团队负责人设定的规则，可以使用这两种定义函数的方式之一。

然而，在一些特殊情况下会使用函数表达式。

立即调用函数表达式或在初始化后立即执行的匿名函数。

;(function () {
  console.log('Code runs!')
})()
 
// ES6
;(() => {
  console.log('Code runs!')
})()

函数表达式的另一个使用场景是作为回调。

buttonElement.addEventListener('click', function (e) {
  console.log('Button is clicked!')
})

或者

array.map((item) => {
  // 对项目进行处理
})

这是使用函数表达式的常见情况，因为我们不需要在整个作用域中了解这个函数。

总结一下，你可以灵活地使用这两种定义函数的方式。如果你想要一个可以在作用域中多个地方灵活使用的函数，请使用函数声明，如果你只需要在有限的时间内使用它，请使用函数表达式。