应有意识复用函数引用以减少内存压力，将逻辑固定的匿名函数提取为具名常量；避免循环内重复定义、渲染中内联箭头函数；优先使用已声明函数、类方法或模块级函数，并谨慎处理闭包。
在JavaScript中，频繁创建匿名函数会增加内存分配压力，尤其在循环、事件绑定或高频率调用场景下，容易引发短期对象堆积，加重垃圾回收负担。关键不是“避免所有匿名函数”，而是有意识地复用函数引用，减少重复实例化。
将匿名函数提取为具名常量
适用于逻辑固定、不依赖动态闭包的场景。例如事件监听器、数组遍历回调等。
- ❌ 避免在循环内反复定义：
for (let i = 0; i button.addEventListener('click', function() {
console.log('item', i);
});
}
- ✅ 提取为外部函数（注意：若需捕获变量，需合理处理作用域）：
const handleClick = (index) => () => console.log('item', index);
for (let i = 0; i button.addEventListener('click', handleClick(i));
}
或更推荐——使用 data 属性 + 统一处理器：
立即学习“Java免费学习笔记（深入）”；
const handleClick = (e) => {
const index = Number(e.target.dataset.index);
console.log('item', index);
};
for (let i = 0; i button.dataset.index = i;
button.addEventListener('click', handleClick); // 复用同一函数引用
}
复用已定义的函数引用而非每次新建
常见于 map/filter/sort 等数组方法。若回调逻辑不随迭代变化，直接传函数名即可。
- ❌ 不必要的匿名包装：
arr.map(x => parseInt(x, 10));
arr.filter(x => x > 0);
- ✅ 直接复用原生或已声明函数：
arr.map(parseInt); // 注意：parseInt 有潜在风险，仅作示例；更稳妥写法：
const toInt = x => parseInt(x, 10);
arr.map(toInt);
const isPositive = x => x > 0;
arr.filter(isPositive);
谨慎使用箭头函数构建闭包
箭头函数本身不会导致额外开销，但若在渲染函数或定时器中频繁生成新闭包（尤其是捕获大量上下文），就会产生新函数对象。
- 避免在 React render 或 Vue template 中写
() => doSomething(id)类型内联处理器（除非配合 useCallback / memo）； - 在 setInterval / setTimeout 中，优先将逻辑封装成独立函数，而非每次传新箭头函数；
- 若必须闭包传参，考虑用 bind 替代（bind 也创建新函数，但语义更明确，且可缓存）：
const handler = handleClick.bind(null, id); // 可提前计算并复用
利用类方法或对象方法统一管理
在类组件或模块作用域中，将回调定义为类原型方法或模块级函数，天然复用。
- 类中定义方法，this.handleClick 是稳定引用（注意绑定时机）；
- 模块顶层导出工具函数，比组件内联定义更利于复用和测试；
- 对需要局部状态的场景，可用 WeakMap 缓存函数与实例的映射，避免强引用泄漏。
