箭头函数与函数表达式的编码规范

箭头函数与函数表达式本质不同，选择依据是语义需求：需动态this、构造能力、arguments/super时必须用函数表达式；仅简洁表达式场景适用箭头函数。

箭头函数和函数表达式在语法、语义和适用场景上存在本质差异，编码规范不是“统一风格”的问题，而是围绕语义正确性和可维护性形成的实践共识。用错类型可能引发 this 错乱、构造失败或调试困难，规范的核心是“选对，而非写齐”。

明确 this 是否需要动态绑定

这是最优先判断项。如果函数体中要访问 this，且该 this 需随调用方式变化（如作为对象方法、事件处理器、被 call/apply/bind 调用），必须用函数表达式。

• ✅ 正确：对象方法、Vue/React 的生命周期钩子、DOM 事件回调（需访问实例或元素）
• ❌ 禁止：用箭头函数定义对象方法（this 指向外层，通常为 window 或 undefined）
• ? 提示：ESLint 规则 no-confusing-arrow 和 prefer-arrow-callback 可辅助识别误用

是否需要作为构造函数或拥有 prototype

若函数需通过 new 实例化，或需挂载原型方法（如自定义类、工具构造器），只能使用函数表达式（或函数声明）。

• ✅ 正确：const Person = function(name) { this.name = name; };
• ❌ 禁止：const Person = (name) => { this.name = name; };（运行时报 TypeError: Person is not a constructor）
• ? 注意：箭头函数没有 prototype 属性，instanceof 判定也失效

是否依赖 arguments 或其他函数专属对象

箭头函数不绑定 arguments、super、new.target。若需访问实参列表（尤其未命名参数处理）、或在类中使用 super，不可用箭头函数。

• ✅ 正确：实现 sum(...args) 类型的聚合函数
• ❌ 禁止：const sum = () => Array.from(arguments).reduce((a, b) => a + b, 0);（arguments 未定义）
• ? 替代方案：用剩余参数 ...args，它在箭头函数中完全可用

简洁性与可读性的平衡

箭头函数的优势在于减少样板代码，但不应以牺牲可读性为代价。

• ✅ 推荐：单参数单表达式 → items.map(x => x.id)
• ✅ 推荐：多参数单表达式 → arr.sort((a, b) => a.value - b.value)
• ⚠️ 谨慎：嵌套过深或含复杂逻辑的箭头函数 → data.filter(x => x.status === 'active' && x.tags.some(t => t.startsWith('v')) && !x.archived) 建议拆分为具名函数
• ? 统一约定：团队内可规定“超过 2 行或含条件分支时，强制使用函数表达式”