微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。在JavaScript中，function关键字做了一个简单的工作：创建一个函数。但是，使用关键字定义函数的方式可以创建具有不同属性的函数。在这篇文章中，我们就来看看如何使用function关键字来定义函数声明和函数表达式，以及这两类函数有什么区别。1.函数表达式vs函数声明函数声明和函数表达式是使用function关键字创建函数的两种方式。作为说明差异的示例，我们创建了两个版本的求和函数：functionsumA(a,b){returna+b;}(functionsumB(a,b){returna+b;});总和(1,2);//???sumB(1,2);//???自己试一下：https://jsfiddle.net/dmitri_p...一般情况下，像往常一样定义函数（sumA函数）。在另一种情况下，函数放在一对括号内（sumB函数）。如果调用sumA(1,2)和sumB(1,2)会发生什么？sumA(1,2)按预期返回3。但是，调用sumB(1,2)会抛出异常：UncaughtReferenceError:sumBisnotdefined。这样做的原因是sumA是用一个函数声明创建的，该函数声明在当前范围内创建一个函数变量（与函数名称同名）。但是sumB是使用函数表达式创建的（将其包装在括号中），它不会在当前范围内创建函数变量。如果要访问使用函数表达式创建的函数，请将函数对象保存到变量中：//可行！constsum=(functionsumB(a,b){returna+b;});总和(1,2);//=>3如果语句以`function`关键字开头，则为函数声明，否则为函数表达式。//函数声明：以`function`关键字开头functionsumA(a,b){returna+b;}//函数表达式：不要以`function`关键字开头constmySum=(functionsumB(a,b){returna+b;});//函数表达式：不以`function`关键字开头[1,2,3].reduce(functionsum3(acc,number){returnacc+number});from在高层次上，函数声明对于创建独立函数很有用，但函数表达式可以用作回调。现在，让我们更深入地研究函数声明和函数表达式的行为。2.函数声明如前例所示，sumA是一个函数声明//函数声明functionsumA(a,b){returna+b;}sumA(4,5);{}.函数声明创建一个函数变量：一个与函数名称同名的变量（例如，前面示例中的sumA）。可以在当前作用域（函数声明之前和之后）甚至在函数作用域本身内访问函数变量。函数变量常用于调用函数或将函数对象传递给其他函数（传递给高阶函数）。例如，编写一个函数sumArray(array)递归地对数组的项目求和（数组可以包含数字或其他数组）：sumArray([10,[1,[5]]]);//=>16functionsumArray(array){让总和=0;for(constitemofarray){sum+=Array.isArray(item)?sumArray（项目）：项目；}返回总和;}sumArray([1,[4,6]]);//=>11自己尝试一下：https://jsfiddle.net/dmitri_p...functionsumArray(array){...}是一个函数声明。包含函数对象的函数变量sumArray在当前范围内可用：在sumArray([10,[1,[5]]])之前和sumArray([1,[4,6]])之后，函数声明，以及函数本身sumArray([1,[4,6]])的范围（允许递归调用）。由于提升，函数变量在函数声明之前可用。2.1函数声明注意事项函数声明语法的目的是创建独立的函数。函数声明应该在全局范围内，或者直接在其他函数的范围内param2){返回param1+param2;}常量结果=myFunc2(1,3);returnresult+param;}同理，不建议在条件(if)和循环(while,for)中使用函数声明：//Bad!if(myCondition){functionmyFunction(a,b){return一个*b;}}else{functionmyFunction(a,b){returna+b;}}我的函数(2,3);使用函数表达式有条件地创建函数以更好地执行。3.函数表达式当function关键字在表达式内部创建函数（有或没有名称）时，就会出现函数表达式。下面是一个使用表达式创建的函数示例：//Functionexpressionsconstsum=(functionsumB(a,b){returna+b;});constmyObject={myMethod:function(){返回42;}};常量数字=[4,1,6];numbers.forEach(functioncallback(number){console.log(number);//日志4//日志1//日志1});在函数表达式中创建两种函数：如果表达式中的函数没有名字，如function(){return42}，则为匿名函数表达式如果函数有名字，如前面的sumB和callback例如，那么它就是一个命名函数表达式3.1关于函数表达式的注意事项函数表达式适合作为回调或有条件创建的函数：//有条件创建的函数letcallback;if(true){callback=function(){return42};}else{callback=function(){return3.14};}//用作回调的函数[1,2,3].map(functionincrement(number){returnnumber+1;});//=>[2,3,4]如果已经创建了命名函数表达式，请注意函数变量仅在创建的函数范围内可用：constnumbers=[4];numbers.forEach(functioncallback(number){console.log(callback);//记录function(){...}});控制台日志（回调）；//ReferenceError:callbackisnotdefined试试看：https://jsfiddle.net/dmitri_p...callback是一个命名函数表达式，所以callback函数变量仅在callback()函数的范围内可用，在其外部不可用。但是，如果将函数对象存储在常规变量中，则可以从函数范围内外的该变量访问函数对象：constcallback=function(number){console.log(callback);//记录function(){...}};constnumbers=[4];numbers.forEach(callback);console.log(callback);//logsfunction(){...}试一试：https://jsfiddle.net/dmitri_p...4.总结根据您使用function关键字创建函数的方式，您可以一分为二地创建一个函数方式：函数声明和函数表达式。留个问题：functionsum(a,b){returna+b}+1是函数声明还是函数表达式？你可以在评论中说出你的答案。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。原文：https://dmitripavlutin.com/ja...交流有梦想，有干货，微信搜索【伟大的走向世界】关注这位凌晨还在洗碗的洗碗智者。本文GitHubhttps://github.com/qq44924588...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
