【译】函数声明 VS 函数表达式

可能你已经知道有好几种方式来编写一个函数。咱们成天都会编写诸如function doStuff() {} () => {}这样的代码。可是你知道它们之间的差别或者为何使用特定的方式来编写函数吗？

注意：全部例子都使用 javascript 来编写。

差别一：name

当你建立一个具名函数，这就是函数声明。函数表达式能够省略 name，使之成为匿名函数。

函数声明

function doStuff() {}
复制代码

函数表达式

const doStuff = function() {};
复制代码

或者 ES6 中新增的箭头函数：

const doStuff = () => {};
复制代码

提高

提高表示你的函数和变量能够在做用域一开始的部分就能被使用，而不是仅在它们被建立以后。它们在编译时初始化，在文件中的任何位置使用。

译者：结合下面的代码能够更好的理解提高的概念。

foo(); // hello
function foo() {
  console.log('hello');
}

console.log(num); // undefined
var num = 1;
console.log(num); // 1
复制代码

函数声明存在提高而函数表达式不会。

举例更容易说明问题：

doStuff();
function doStuff() {}
复制代码

上面的代码能正常运行，但下面的代码不会：

doStuff();
const doStuff = () => {};
复制代码

使用函数表达式的状况

看起来好像由于函数声明的提高特性，让函数表达式变得没有什么用处了。可是须要考虑函数会在什么时候何地被使用才能决定使用声明或者表达式。

函数表达式能够有效的避免污染全局做用域。比起你的代码中充斥着各类各样的具名函数，匿名函数可让你使用后当即丢弃掉。

IIFE

当即执行的函数表达式。从名字就能够知道它的做用了。函数同时被建立和调用，你能够这样使用 IIFE：

(function() => {})();
复制代码

或者

(() => {})();
复制代码

若是想深刻了解，能够查看这篇文章。

回调函数

做为参数传入其余函数的函数一般被称为回调函数。例子：

function mapAction(item) {
  // do stuff to an item
}
array.map(mapAction);
复制代码

这里的问题是mapAction会在你整个程序中均可用——但这没有必要。若是是一个函数表达式，它在使用它的函数以外就不可用了。

array.map(item => { //do stuff to an item })
复制代码

或者

const mapAction = function(item) {
  // do stuff to an item
};
array.map(mapAction);
复制代码

固然这里的mapAction在初始化它的代码以后仍然可用。

小结

**简单地说，若是你想在让函数全局通用，在全局做用域上使用函数声明建立函数。**使用函数表达式限制函数的可用范围，保持全局做用域不被污染，也让代码更为简洁。

参考

• Function declaration, MDN docs.
• Function expression, MDN docs.
• Hoisting, MDN glossary.

原文连接

• When to use a function declaration vs. a function expression