谈 JavaScript 函数表达式与函数声明|函数表达式与函数声明区别

谈 JavaScript 函数表达式与函数声明

2022-03-23 前端基础

谈 JavaScript 函数表达式与函数声明

在 JavaScript 中创建函数有两种方法：函数表达式和函数声明。在本文中，将讨论何时使用函数表达式与函数声明，并解释它们之间的区别。

函数声明已经使用了很长时间，但函数表达式已经逐渐占据主导地位。函数表达式和函数声明之间有一些关键区别，来看看这些差异，以及何时在代码中使用函数表达式与函数声明。

// 函数声明
function funcDeclaration() {
    return "函数声明";
}
// 函数表达式
const funcExpression = function () {
    return "函数表达式";
};

函数声明是在创建函数并为其命名的方式，开始使用 function 关键字声明函数。例如：

function customFunction() {
    // 函数逻辑
    conosle.log("Hello")
};

如上所见，函数名称（customFunction）是在创建函数时声明的，这种方式着这个函数可以在定义之前调用它，如下：

customFunction();
function customFunction() {
    // 函数逻辑
    console.log("Hello");
}

函数表达式是在创建函数并将其分配给变量，此方式定义的函数是匿名函数，这意味着它没有名称。例如：

const customFunction = function() {
    // 函数逻辑
    conosle.log("Hello")
};

如上所述，该函数被分配给 customFunction 变量，这种方式必须先定义该函数，才能调用它。如下的方式是错误的：

customFunction();
const customFunction = function() {
    // 函数逻辑
    conosle.log("Hello")
};

函数表达式和函数声明之间有几个关键区别：

函数声明被提升（关于提升，可以参阅《悟透前端：加深Javascript变量函数声明提升理解》），而函数表达式则没有。可以在定义函数声明之前调用它，但不能使用函数表达式执行此操作。
使用函数表达式，可以在定义函数后立即使用它。使用函数声明，必须等到整个脚本被解析。
函数表达式可以是匿名的，而函数声明则不能。

与 let 语句类似，函数声明被提升到其它代码的顶部。函数表达式不会被提升。这允许它们从定义它们的范围内保留局部变量的副本。

通常，可以互换使用函数声明和函数表达式，但有时函数表达式会生成更易于理解的代码，而不需要临时函数名。

那么，什么时候应该使用函数表达式与函数声明呢？

答案取决于需求，如果需要一个更灵活的函数或一个不被提升的函数，那么函数表达式就是首选。如果需要一个更具可读性和可理解性的函数，请使用函数声明。

如上所见，这两种语法是相似的，最明显的区别是函数表达式是匿名的，而函数声明是有名字的。当需要做一些函数表达式不能做的事情时，通常会使用函数声明。如果不需要做任何只能通过函数声明才能完成的事情，那么通常最好使用函数表达式。

当需要创建递归函数或需要在定义函数之前调用该函数时，就需要使用函数声明。

作为一个经验法则，当不需要做这些事情时，使用函数表达式来获得更简洁的代码。

在大多数情况下，很容易确定哪种定义函数的方法最适合需求。下面这些准则在大多数情况下可以快速做出决定。