乐趣区

关于前端:JS-中的函数表达式和函数声明你混淆了吗

jiezi

作者：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。

退出移动版