JS 中的函数表达式和函数声明你混淆了吗？

做者：Dmitri Pavlutin
译者：前端小智
来源：dmitripavlutin

有梦想，有干货，微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及个人系列文章。

在 JavaScript 中，function关键字能够完成一个简单的工做：建立一个函数。 可是，使用关键字定义函数的方式能够建立具备不一样属性的函数。

在本文中，咱们来看一下，如何使用function关键字来定义函数声明和函数表达式，以及这两种函数之间的区别又是什么。

1.函数表达式vs函数声明

函数声明和函数表达式是使用 function 关键字建立函数的2种方法。

举个例子来讲明差别，咱们建立两个版本的 sums 函数：

function sumA(a, b) {
  return a + b;
}

(function sumB(a, b) {
  return a + b;
});

sumA(1, 2); // ???
sumB(1, 2); // ???

动手试试：https://jsfiddle.net/dmitri_pavlutin/8b46yokr/2/

通常状况，像往常同样定义函数(sumA函数)。在另外一种状况下，函数被放置在一对括号中(sumB函数)。

若是调用 sumA(1,2) 和 sumB(1,2) 会发生什么？

如预期的那样，sumA(1, 2) 返回 3。可是，调用sumB(1, 2)会引起异常：Uncaught ReferenceError: sumB is not defined。

其缘由是sumA是使用函数声明建立的，该函数声明在当前做用域中建立一个函数变量（具备与函数名称相同的名称）。 可是sumB是使用函数表达式建立的（将其包装在括号中），该函数表达式不会在当前做用域内建立函数变量。

若是你想访问使用函数表达式建立的函数，那么将函数对象保存到一个变量中：

// Works!
const sum = (function sumB(a, b) {
  return a + b;
});

sum(1, 2); // => 3

若是语句以`function`关键字开头，则为函数声明，不然为函数表达式。

// 函数声明：以`function`关键字开头
function sumA(a, b) {
  return a + b;
}

// 函数表达式：不以`function`关键字开头
const mySum = (function sumB(a, b) {
  return a + b;
});

// 函数表达式：不以`function`关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { 
  return acc + number 
});

从更高的角度来看，函数声明对于建立独立函数颇有用，可是函数表达式能够用做回调。

如今，咱们更深刻地研究函数声明和函数表达式的行为。

2.函数声明

在前面的示例中已经看到的，sumA是一个函数声明:

// Function declaration
function sumA(a, b) {
  return a + b;
}

sumA(4, 5); // => 9

当一个语句包含function关键字，后跟函数名称，一对带参数的括号(param1, param2, paramN)以及包围在一对花括号{}中的函数主体时，就会发生函数声明。

函数声明会建立一个函数变量：一个与函数名称同名的变量（例如，上一个示例中的sumA）。 在当前做用域中（在函数声明以前和以后），甚至在函数做用域自己内，均可以访问该函数变量。

函数变量一般用于调用函数或将函数对象传递给其余函数（传递给高阶函数）。

例如，编写一个函数 sumArray(array)，以递归方式累加一个数组的项（该数组能够包含数字或其余数组）：

sumArray([10, [1, [5]]]); // => 16

function sumArray(array) {
  let sum = 0;
  for (const item of array) {
    sum += Array.isArray(item) ? sumArray(item) : item;
  }
  return sum;
}

sumArray([1, [4, 6]]); // => 11

动手试试：https://jsfiddle.net/dmitri_pavlutin/n7wcryuo/

function sumArray(array) { ... } 是函数声明。

包含函数对象的函数变量sumArray在当前做用域中可用：sumArray([10, [1, [5]]])以前和sumArray([1, [4, 6]])以后，函数声明， 以及函数自己的做用域sumArray([1, [4, 6]])（容许递归调用）。

因为提高，函数变量在函数声明以前可用。

2.1 函数声明的注意事项

函数声明语法的做用是建立独立函数。 函数声明应在全局做用域内，或直接在其余函数的做用域内:

// Good!
function myFunc1(param1, param2) {
  return param1 + param2;
}

function bigFunction(param) {
  // Good!
  function myFunc2(param1, param2) {
    return param1 + param2;
  }

  const result = myFunc2(1, 3);
  return result + param;
}

基于相同的缘由，不建议在条件（if）和循环（while，for）中使用函数声明：

// Bad!
if (myCondition) {
  function myFunction(a, b) {
    return a * b;
  }
} else {
  function myFunction(a, b) {
    return a + b;
  }
}

myFunction(2, 3);

使用函数表达式更好地执行有条件地建立函数。

3.函数表达式

当function关键字在表达式内部建立函数（带有或不带有名称）时，将出现函数表达式。

如下是使用表达式建立的函数的示例：

// Function expressions

const sum = (function sumB(a, b) {
  return a + b;
});

const myObject = {
  myMethod: function() {
    return 42;
  }
};

const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {
  console.log(number);
  // logs 4
  // logs 1
  // logs 1
});

在函数表达式中建立了两种函数:

• 若是表达式中的函数没有名称，例如 function（）{return 42}，那是一个匿名函数表达式
• 若是函数具备名称，例如 上一个示例中的sumB和回调，那么这是一个命名函数表达式

3.1 函数表达式的注意事项

函数表达式适合做为条件建立的回调或函数：

// Functions created conditionally
let callback;
if (true) {
  callback = function() { return 42 };
} else {
  callback = function() { return 3.14 };
}

// Functions used as callbacks
[1, 2, 3].map(function increment(number) {
  return number + 1;
}); // => [2, 3, 4]

若是已建立命名函数表达式，请注意，该函数变量仅在建立的函数做用域内可用:

const numbers = [4];
numbers.forEach(function callback(number) {
  console.log(callback); // logs function() { ... }
});

console.log(callback); // ReferenceError: callback is not defined

试一试：https://jsfiddle.net/dmitri_pavlutin/sujwmp10/2/

callback是一个命名的函数表达式，所以callback函数变量仅在callback()函数使用域可用，而在外部则不可用。

可是，若是将函数对象存储到常规变量中，则能够在函数做用域内外从该变量访问函数对象：

const callback = function(number) {
  console.log(callback); // logs function() { ... }
};

const numbers = [4];
numbers.forEach(callback);
console.log(callback); // logs function() { ... }

试一试：https://jsfiddle.net/dmitri_pavlutin/1btmrcu2/1/

4. 总结

根据使用function关键字建立函数的方式，能够经过两种方法来建立函数：函数声明和函数表达式。

留个问题： function sum(a, b) { return a + b } + 1 是函数声明仍是函数表达式，能够在留言中说出你的答案。

---

编辑中可能存在的bug无法实时知道，过后为了解决这些bug,花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://dmitripavlutin.com/javascript-function-expressions-and-declarations/

交流

文章每周持续更新，能够微信搜索【大迁世界 】第一时间阅读，回复【福利】有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，欢迎Star。