17370845950

JavaScript函数是复用的基础设施，通过function声明与箭头函数的this差异、灵活参数设计（默认值/剩余参数/解构）及闭包封装私有状态实现可控复用。

JavaScript 函数不是“提升复用性”的装饰品，而是让复用成为可能的基础设施。没有函数，每次用到相同逻辑都得复制粘贴；有了函数，只需一次定义、多处调用。

function 声明 vs 箭头函数：语法和 this 行为差异直接影响复用场景

两种定义方式在行为上关键不同，选错会导致 this 绑定失效、无法作为构造函数、或意外丢失上下文 —— 这些都会让本想复用的函数在不同调用位置出错。

• function 声明会变量提升（hoisting），可在定义前调用；箭头函数不会，必须先声明再使用
• 箭头函数不绑定自己的 this，它继承外层作用域的 this；普通函数的 this 取决于调用方式（如 obj.fn() 中 this 是 obj）
• 需要动态 this（比如事件处理器、对象方法）时，别用箭头函数；需要保持外层 this（比如回调中访问组件实例）时，箭头函数更安全

参数设计：默认值、剩余参数和解构让函数真正适配多变输入

硬编码参数个数或顺序会严重限制复用。合理利用参数机制，才能让一个函数应对多种调用方式。

• 用 function foo(a = 1, b = 'default') {} 避免对可选参数手动判空
• 用 function sum(...nums) { return nums.reduce((a, b) => a + b, 0); } 支持任意数量数字相加
• 对象参数 + 解构可读性强且易扩展：function createUser({ name, age = 18, role = 'user' }) { ... }，调用时只传关心的字段，新增字段也不破坏旧调用

闭包封装私有状态：复用 ≠ 全局暴露，而是可控共享

函数

复用常被误解为“写一次、到处 import”，但更多时候，复用的是“带记忆的能力”——比如计数器、缓存、配置工厂。这靠闭包实现。

• 返回函数形成闭包：const makeAdder = (x) => (y) => x + y; const add5 = makeAdder(5); add5(3); // 8
• 模块级私有变量：let cache = new Map(); export function getFromCache(key) { if (cache.has(key)) return cache.get(key); const val = expensiveCalc(key); cache.set(key, val); return val; } —— 多次调用共享同一 cache 实例
• 注意：闭包会持续持有对外部变量的引用，不当使用可能导致内存无法释放

函数复用的难点不在语法，而在边界控制：参数要不要默认、this 该不该绑定、状态该不该隔离。这些决定往往出现在第 3 次调用该函数时才暴露出来 —— 到那时，改就比重写还费劲。