洞察函数声明、表达式与箭头函数运行机理，写出顶级代码

函数声明：稳定公开的基石

函数声明被提升（hoisted）的特性，使其在模块初始化、工具函数集合等需要前置依赖的场景中表现优异。JavaScript引擎在解析阶段会自动将函数声明提升到作用域顶部，因此你可以在代码中先调用后定义。这种定义方式要求函数命名清晰、职责单一，并且被多处复用。formatDate、isValidEmail 这类通用工具函数，就是它的理想归宿。

使用函数声明时需注意：不要在条件块（如 if (x) { function foo() {} }）中使用，因为不同浏览器对此处理方式不一致，容易引发歧义。此外，函数声明在调试时堆栈追踪体验极佳——函数名真实可见，不会像匿名表达式那样只显示 anonymous。

函数表达式：封装与灵活性的核心

函数表达式将函数视为“值”来使用，由于没有提升，必须先定义再调用，这种可控性使其成为模块化和高阶操作的基石。最常见的用法是立即执行函数（IIFE），用于隔离作用域：(function(){ /* 私有逻辑 */ })();，能有效避免变量污染。作为参数传入高阶函数时也很自然，例如 array.map(function(x){ return x * 2; })。

建议给函数表达式命名，以方便调试：即使赋值给变量，也可以写成 const handler = function clickHandler(){...}。这样在堆栈信息中会出现具体名称，而非笼统的 anonymous。

箭头函数：专注计算，拒绝意外的 this

箭头函数没有自己的 this、arguments、super 或 new.target，这些值均从外层词法作用域继承。这不是设计缺陷，而是它的核心契约。在回调场景中，箭头函数是首选——事件监听、定时器、Promise 链、数组方法（map、filter）中，它能天然保持外层的 this，避免手动绑定的麻烦。

单表达式时优先使用隐式返回：users.map(u => u.name) 比 users.map(u => { return u.name; }) 更简洁。若需返回对象字面量，记得加括号：=> ({ id: 1, name: 'a' })，否则大括号会被解析为函数体。务必注意：不要用箭头函数定义对象方法或构造函数，否则 this 指向会出错。

组合策略：让函数类型服务于代码意图

顶级代码的标志之一，是函数定义方式与语义高度对齐。具体建议如下：

• 工具库的公共 API，用函数声明来保证可用性与可读性。
• 组件内部的事件处理器，用箭头函数来避免手动绑定 this。
• 需要动态生成或闭包捕获的逻辑，用函数表达式，配合 IIFE 或工厂模式。
• 对于复杂逻辑分支，不要硬塞箭头函数——它天生不适合多语句，强行使用会破坏可读性，得不偿失。