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

如果语句以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]

如果已创建命名函数表达式，请注意，该函数变量仅在创建的函数作用域内可用:

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
…(img-g73vvM2M-1714927307737)]

[外链图片转存中…(img-RKOWzHJ5-1714927307738)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！