Javascript 中函数声明与函数表达式的区别

在 Javascript 中有着多种方式可以定义一个函数。并由于几种方式之间的实现差别很小，容易让 JS 新手搞不清楚其中的区别。所以在这篇文章中，我将带着自己的思考讨论下创建函数的各种形式。

• 函数声明

• 函数表达式:

  • 匿名函数表达式
  • 命名函数表达式
  • 立即调用函数表达式

1. 函数声明

• 这是使用函数最常见的方法，并且它与其他语言相似，比如PHP。函数声明以 function 关键字开头，随后跟着函数的名称。

这是一个示例：

function weather() {
    console.log('it is raining outside');
}

weather();

输出：

it is raining outside

这里需要注意的是，这里的函数调用在函数声明之后。不过如下操作也不报错。

weather();

function weather() {
    console.log("it is raining outside");
}

输出：

it is raining outside

如果你在想：这怎么回事？在函数声明前调用了函数？

• 答案是 函数提升。通过函数提升，JavaScript 把所有的函数声明放在了函数之前。所以在何时何地都可以调用函数而不会产生问题。

如上所述即为函数声明的简述。接下来我们看下函数表达式。

2. 函数表达式

实现与上面相同的逻辑，但这次用表达式的方式来做。

weather();

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}

在这里，我们已经将函数赋值给了变量 weather。不过上述代码将会报一个错误。

输出：

TypeError: weather is not a function

原因是函数表达式并不支持提升。所以我们一定要在调用函数前定义函数，代码如下所示：

var weather = function() {
    console.log("it is raining outside");
    console.log(weather);
}
weather();

输出：

it is raining outside
[Function: weather]

虽然在这种方式下函数不能自动提升，但我更倾向于使用函数表达式而不是常规的函数声明。对我来说，函数表达式看起来会更清晰一点。表达式还强迫我们把调用放在声明的后边，让代码更清晰可读一些。

• 匿名函数

另一点是，尽管我们把函数分配给了变量，但我们并没有在 function 关键字后添加函数名称。所以，这种写法被称为 匿名函数。

• 命名函数表达式

你还可以为函数表达式命名：

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
    console.log(w);
}
weather();

注意在 function 关键字后的 w。

输出：

it is raining outside
[Function: weather]
[Function: w]

不过，如下的写法是不起作用的：

var weather = function w () {
    console.log("it is raining outside");
    console.log(weather);
}
console.log(w);
weather();

输出：

ReferenceError: w is not defined

这意味着名称 w 的作用范围在函数内受到了限制

• 立即调用函数表达式

当我想为浏览器写一些即时性的脚本时，我会用这种方式来实现，代码看起来像这样：

(function() {
    console.log("it is raining outside");
})();

它既不需要调用也不需要函数名称。这种函数在脚本加载完毕后会立即执行。此外，由于这是一个函数，所以其中定义的变量将不会污染全局变量区。

总结

这里我提到了一些使用 JavaScript 函数的常见方法，除此之外还有更多的方式。但目前为止这些技术可以很好的满足我的需求，元芳你怎么看？你最喜欢的函数定义方式又是什么呢？请在评论中留言。

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

---

原文地址：https://dev.to/kamalo__22/function-decla...

译文地址：https://learnku.com/vuejs/t/51998