写JS很多年我经常被问到一个基础到不能再基础、但坑起来要命的问题函数声明和函数表达式到底有什么区别说实话这个问题我在面试里考过别人也被别人考过自己还因为没搞清楚两者的差别线上修过一个挺尴尬的bug。今天这篇就把函数声明和函数表达式的底层逻辑、执行机制、实战选型和常见坑一次性说透。文章不预设你已经懂了很多概念只要写过几行JS哪怕只是跟着教程敲过function foo() {}和var foo function() {}都能跟着捋清楚。讲完你不仅能应对面试题还能在实际项目里做出更合理的写法选择少踩几个版本兼容和变量提升的坑。1. 两种写法的直观区别与语法判断规则1.1 函数表达式和函数声明从形状上就差在哪很多新手看到function() {}就头晕因为JS里创造函数的方式太多了光是用function关键字就有好几种写法。最常见的两种长这样// 函数声明 function sum(a, b) { return a b; } // 函数表达式 const sum2 function(a, b) { return a b; };表面上看区别就是有没有函数名、是直接写在顶层还是赋值给了一个变量。但真正的本质区别不是“有名字”和“没名字”而是它们在JavaScript语法解析器眼里属于两种完全不同的语法结构。函数声明是一条独立的声明语句它由function关键字开头后面紧跟一个标识符作为函数名再是参数列表和函数体。这个过程类似var声明一个变量是整个代码结构的一部分。函数表达式则不同它本质上是“一个函数被当作值来使用”。function(a, b) {}这部分是一个表达式也就是可以参与赋值、运算、传参、返回的“值”跟数字、字符串、对象一样只是这个值恰好是一个函数。我见过很多初学者把这两个搞混写出来的代码看着没问题一运行就报foo is not a function。原因就是声明是声明表达式是表达式两者在JavaScript引擎里的处理路径完全不一样。1.2 语法层面怎么判断一个function是声明还是表达式判断规则其实一句话就能讲清楚看function关键字是不是处于一条语句的最开头。如果是那就是函数声明如果不是那就是函数表达式。举个很典型的例子function foo() {} // 声明function在语句开头 var bar function() {}; // 表达式function不是语句开头 (function() {})(); // 表达式function前面有左括号 !function() {}(); // 表达式function前面有感叹号这个规则在括弧场景下特别有趣。很多人写立即执行函数IIFE时会好奇为什么非要包一层括号不包行不行我直接给你看报错现场function() {}(); // 报错Function statements require a function name为什么因为function在这里是语句开头引擎把它当作函数声明来处理函数声明必须有名字所以报错。即使加上名字也还不行function foo() {}(); // 有的环境下不报错但也不执行现代浏览器会报错因为函数声明后面不能直接跟调用运算符。但如果你用括号把函数包起来function就不是语句开头了整个东西变成了一个函数表达式表达式算完后得到一个函数引用后面再加()就能立即执行。(function foo() {})();现在你应该明白了function关键字在不同位置、不同语境下在语言本身看来完全是两种东西。这种“同一个关键字两种身份”的设计是JS语法里一个非常核心、也非常容易踩坑的特征。理解了这个后面所有提升、闭包、IIFE的问题都顺了。2. 提升机制函数声明和函数表达式的执行时机差异2.1 变量提升与函数声明提升不是一回事JS里有个著名的现象叫“提升”hoisting指的是在代码执行之前引擎先把声明部分处理掉了。最直观的例子console.log(a); // 输出 undefined而不是报错 var a 5;这里a在声明之前就能访问只是值是undefined。因为var a这个声明被引擎提到了作用域顶部但赋值 5留在了原地。函数声明也受这个机制影响但方式完全不同。函数声明不仅声明被提升整个函数体也跟着提升了。所以在函数声明之前调用完全没问题sayHello(); // 输出 Hello function sayHello() { console.log(Hello); }这个特性非常反直觉在很多其他语言里你要先定义函数才能调用。但JS里函数声明会被完整提升到作用域顶部所以你可以在声明之前使用。函数表达式就不一样了它遵守的是变量提升的规则。变量名被提升但值也就是函数没有提升。举个例子sayHello(); // 报错sayHello is not a function var sayHello function() { console.log(Hello); };这里var sayHello被提升了所以sayHello这个变量名是存在的但它的值是undefined你用undefined()调用自然报错。我把这个差异整理成一张表面试和日常排查都能用上对比维度函数声明函数表达式var赋值提升内容整个函数定义变量名函数体不提升声明前调用正常执行报错is not a functiontypeof 在声明前functionundefined是否能在语句中参与赋值不能能典型场景工具函数、顶层函数回调、闭包、IIFE2.2 提升的作用域规则与条件语句陷阱提升按作用域进行函数声明和var一样在函数内部提升到函数作用域顶部在全局则提升到全局。但有一个历史遗留坑就是“条件语句里的函数声明”。很多老代码长这样if (someCondition) { function doSomething() { console.log(condition true); } } else { function doSomething() { console.log(condition false); } }这段代码在不同环境下行为不太一样。ES5之前JavaScript语言规范没有明确规定块级作用域里的函数声明到底该怎么处理所以各浏览器自己发挥有的提升到函数作用域后面的覆盖前面的有的只在块内生效。这也是老面试题里“打印结果不确定”的一个来源。到了ES6规范终于明确了块级函数声明在块级作用域内有效并且会被提升到所在块的顶部。什么意思{ console.log(typeof foo); // function不是 undefined function foo() {} } console.log(typeof foo); // undefined块外不可见这有点复杂但日常开发中我的建议很简单不要在if、for、while的块里直接写函数声明。如果你想根据条件定义函数用函数表达式赋值更安全let doSomething; if (someCondition) { doSomething function() { console.log(condition true); }; } else { doSomething function() { console.log(condition false); }; }这样的写法在任何版本、任何模式下行为都一致。我早期在项目里看到过那种条件声明函数的老代码在Chrome里好好的在旧版Safari里却覆盖了查了半天原因就是这个。3. 命名函数表达式与匿名函数表达式细节里见真章3.1 匿名函数表达式在调试时的痛点函数表达式最常见的形态是不给函数起名字直接赋值const btn document.querySelector(button); btn.addEventListener(click, function() { console.log(clicked); });这种写法在回调场景下简洁、够用但我必须说它在调试时有一个烦人的问题报错堆栈里永远看不到这个函数叫什么。你想象一下这个场景函数运行报错浏览器控制台把堆栈打出来Uncaught Error: something went wrong at anonymous:1:23 at anonymous:2:12全是anonymous你得靠猜的。在复杂项目里尤其是事件处理链很长、Promise链很多的时候这种匿名函数堆栈会让你排查成本直线上升。所以我的习惯是给函数表达式命名尤其是那些逻辑比较复杂、可能在递归或异步中被调用的函数。btn.addEventListener(click, function handleClick() { console.log(clicked); });这个写法叫做“命名函数表达式”函数名handleClick只在函数内部可见外部依然是通过变量btn.addEventListener回调引用它不会污染外部作用域。但报错堆栈里会显示handleClick一眼就知道问题出在哪。3.2 命名函数表达式的递归和自引用场景命名函数表达式第二个大用途是实现可靠的递归。你可能会说递归用变量名调自己不就行了问题在于变量名可能会被篡改。看这个例子function factorial(n) { if (n 1) return 1; return n * factorial(n - 1); }这没问题。但如果把这个函数赋值给另一个变量再把原变量覆盖掉呢const f factorial; factorial null; f(5); // 报错factorial is not a function这里面f调用的还是原来的函数体函数体内部用的factorial却指向了null。万一代码里有人不小心重新赋值整个递归链就断了。用命名函数表达式解决const factorial function f(n) { if (n 1) return 1; return n * f(n - 1); }; const f factorial; factorial null; f(5); // 正常返回 120因为函数内部引用的是f这个名字而f是函数自身内部的标识符不依赖外部变量所以即使外部factorial被覆盖递归依然没问题。在比较老的IEIE8及以前上命名函数表达式有个著名的bug会把函数名泄漏到外部作用域。但今天的浏览器早就没有这个问题了你在现代项目里可以放心用。匿名函数和命名函数表达式的选择我个人的经验是一行能写完的简单回调用匿名没问题超过三行、有递归需求、或者在业务关键路径上的回调用命名函数表达式调试体验提升一个档次。4. 立即执行函数与闭包函数表达式的主场4.1 IIFE为什么必须用函数表达式前面讲了语法层面的判断规则现在来看一个最典型的应用立即执行函数表达式英文缩写IIFEImmediately Invoked Function Expression。写法一般有两种(function() { console.log(run now); })(); (function() { console.log(run now); }());这两种写法都合法区别只在括号放哪一个是把整个函数包起来再调一个是函数体包起来、括号紧跟后面。我个人习惯用第一种因为视觉上更清晰地表达“这里在创建一个函数并立即调用”。IIFE在ES6之前是模拟模块化和局部作用域的最主要手段。因为函数在JS里会创建自己的作用域IIFE能让你在不污染全局的前提下执行一段逻辑(function() { var privateVar secret; console.log(privateVar); })(); console.log(typeof privateVar); // undefined外面访问不到如果离开IIFE这个场景你会发现很多概念串起来了因为函数声明不能直接被()调用第1节讲过所以IIFE必须用表达式形式而表达式形式又离不开“函数是值”这个前提。JS的语法设计在这里是一环扣一环的。4.2 用函数表达式实现闭包和私有变量闭包是另一个被讲烂的概念我不想堆定义用一个计数器来演示最实在const createCounter function() { let count 0; return function() { count; return count; }; }; const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2 console.log(counter()); // 3注意这里createCounter是函数表达式const赋值返回值又是一个函数表达式。这个返回的函数虽然创建在createCounter的作用域里但它持有对count变量的引用在createCounter执行完毕后依然能访问count。这就是闭包。为什么这对理解函数声明和函数表达式有帮助因为闭包的常见写法几乎都依赖于“把函数当作值返回”的能力。函数声明更偏向于“定义一个具名的、独立的功能块”它不会有这种返回值是函数的形态。你在写闭包、高阶函数、柯里化的时候用的基本都是函数表达式。另一个经典例子是事件循环里的循环变量问题。我写过一段糟糕的代码for (var i 0; i 3; i) { setTimeout(function() { console.log(i); // 期望输出 0 1 2结果输出 3 3 3 }, 100); }因为var没有块级作用域循环里的i是同一个变量等到定时器回调执行时i已经变成3了。用IIFE加函数表达式来固定每一轮的ifor (var i 0; i 3; i) { (function(j) { setTimeout(function() { console.log(j); // 输出 0 1 2 }, 100); })(i); }现在更推荐用let但在老代码维护时这种IIFE函数表达式的修复方式依然大量存在。理解了函数表达式的赋值、传参和立即执行你才能看懂这些老代码在干什么。5. 实际工程中的选型什么时候用哪种写法5.1 顶层工具函数与事件回调的取舍讲完原理聊点实际的。团队成员写代码风格五花八门如果不去约定就会出现一个文件里既有function foo() {}又有const foo function() {}还有const foo () {}读起来很分裂。所以我在团队里一般会立几条简单的约定。能用函数声明的场景模块顶层定义的、名字清晰、功能独立的工具函数。比如export function formatDate(date) { // ... } export function parseParams(url) { // ... }原因是函数声明有提升机制这意味着你可以在文件底部定义、在文件顶部使用代码阅读顺序更贴近“业务逻辑在前、工具实现细节在后”。另外具名函数在调试工具里也更容易识别。适合用函数表达式的场景需要作为值传递的时候回调、事件处理器、Array.map的参数、Promise的then回调等。比如users .filter(u u.age 18) .map(u u.name);回调场景下函数表达式尤其箭头函数写起来简洁可读性反而更好。有一点要注意事件监听函数如果要解除监听必须用函数表达式或声明的具名函数不能传匿名函数const handler function() { console.log(clicked); }; btn.addEventListener(click, handler); // 之后可以解除 btn.removeEventListener(click, handler);你传一个匿名函数进去后面没有引用无法解除监听只能靠removeAllListeners之类的兜底方案这种代码在大型项目里是隐患。5.2 箭头函数与function表达式的对比项目里有一个常见争论能用箭头函数就全用箭头函数行不行我的回答是优先用但要清楚它和function表达式在两个关键地方的差异不能无脑替换。this绑定机制不同。function表达式的this取决于调用方式谁调用就指向谁箭头函数的this定义时就已经绑定为外层作用域的this之后不会变。所以在对象方法、原型方法里用箭头函数会出问题const obj { name: demo, getName: () { return this.name; // this 指向外层通常是 undefined } }; obj.getName(); // 输出 undefined这种对象方法应该用function表达式或方法简写。arguments对象不同。function表达式内部有arguments对象箭头函数没有只能使用外部作用域的arguments。如果需要处理不定长参数用剩余参数更合理但如果代码里依赖arguments箭头函数会直接挂掉。再一个差异是箭头函数不能作为构造函数不能new也没有prototype属性。所以写类、写工具库、写需要动态this的逻辑时用function表达式写简洁回调、要保持外层this时用箭头函数。我用一个表把三者的关键差异列清楚对比维度函数声明function 表达式箭头函数提升完整提升变量名提升函数体不提升变量名提升函数体不提升this动态绑定动态绑定词法绑定外层thisarguments有有没有作为构造函数可以可以不行具名堆栈清晰匿名/可命名变量名可作参考但识别较差典型场景顶层函数回调、闭包、动态this简洁回调、保持this我只能说箭头函数和function表达式不是谁替代谁的关系而是各管一段。硬用箭头函数替代所有function你会遇到this错乱、arguments缺失这类匪夷所思的问题反过来所有回调都写function代码又会变得冗长。6. 面试题与常见坑位实录6.1 经典面试题组合解析函数声明和函数表达式的差异是JS面试的高频考点面试官最喜欢出一组小题目看你能不能答对。我把常见的几个组合整理一下。题目一输出什么console.log(typeof foo); // 输出什么 function foo() {} var foo function() {};答案是function。过程是函数声明先被提升var foo也提升但不重复赋值因为foo已经存在var声明不会再覆盖它。所以typeof foo是function。题目二输出什么console.log(typeof foo); // 输出什么 var foo function() {}; function foo() {}答案还是function但注意代码执行到var foo function() {}这一行时foo被重新赋值为函数表达式的结果之后function foo() {}这个声明早在运行前就处理过了。所以最终依然是function。题目三输出什么var a 1; function foo() { console.log(a); var a 2; } foo();答案是undefined。因为函数内部的var a提升到了函数顶部console.log(a)在a赋值之前执行。这个题实际考的不是函数声明而是变量提升但经常和函数声明的题目混在一起出容易把人绕晕。题目四命名函数表达式外部的可见性var f function foo() { console.log(typeof foo); // 输出什么 }; f(); console.log(typeof foo); // 输出什么函数内部输出function因为foo这个名字在函数内部可见外部输出undefined因为命名函数表达式的名字不会污染外部作用域。如果没答对说明对命名函数表达式的内部可见性理解还不够。6.2 我踩过的两个真实业务坑面试题归面试题真实业务里的坑往往更隐蔽。说两个我自己的经历。第一个坑条件加载功能导致“函数不存在”的报错。之前维护一个老项目代码里有类似这样的写法if (process.env.NODE_ENV production) { function trackEvent() { // 生产埋点 } } else { function trackEvent() { // 开发调试埋点 } }这段代码在开发环境跑得好好的打包到生产后就偶尔报trackEvent is not defined。原因就是块级作用域内函数声明的行为在ES6严格模式下只提升到块内trackEvent在块外不可见。后来改成函数表达式赋值问题消失。这是我第一次踩到块级函数声明的坑从那以后我再也不在if里写函数声明。第二个坑递归函数因为外部变量覆盖挂掉。我写过一个文件解析器内部有个walk函数递归遍历目录树同事在别处定义了一个同名全局变量并赋了新值结果运行到一半报walk is not a function。排查了很久最后用命名函数表达式把递归函数体绑定到自身名字上才彻底解决。当时我还在代码注释里写了一行警告“不要改这个名字”。这两个坑都属于“平时遇不到、遇到就是线上事故”的类型根本解法都是把函数声明换成更保守的函数表达式。最后再分享一个小技巧如果你在调试时想快速确认某个函数是声明还是表达式在浏览器控制台输入这段代码function foo() {} console.log(foo.toString()); // 直接看函数的源码表示输出能帮你确认它是不是被提升、是不是有名字。这种底层机制的东西多动手验证比死记结论可靠得多。函数声明和函数表达式说到底就是JS对“函数”这个一等公民的两种使用方式一个把它当语句一个把它当值。理解了这一点后面再学箭头函数、类、模块化都能顺很多。
