JavaScript函数是引用类型且本质为对象,具备赋值、传参、返回、存储能力,核心在于通过纯函数、高阶函数、工厂函数和类等手段组织结构以提升复用性、可测性与可维护性。

Function 是 JavaScript 中的引用数据类型,本质是对象,因此可被赋值、传参、返回、存储——这正是封装可复用逻辑的核心能力。关键不在于“它是不是函数”,而在于“如何组织函数结构,使其易于复用、测试和维护”。
用纯函数封装无副作用逻辑
纯函数指相同输入始终返回相同输出,且不修改外部状态或依赖全局变量。这类函数天然适合复用。
- 避免闭包捕获不稳定外部变量(如 DOM 元素、时间戳、随机数)
- 把依赖显式作为参数传入,例如:// ✅ 好
- const formatDate = (date, format) => { ... };
- // ❌ 避免隐式依赖
- const formatDate = () => { return new Date().toLocaleString(); };
用高阶函数抽象通用行为模式
高阶函数接收函数为参数或返回函数,能剥离重复流程,聚焦业务差异。
- 例如封装防抖:const debounce = (fn, delay) => { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); }; };
- 再如封装请求重试:const withRetry = (fn, max = 3) => async (...args) => { for (let i = 0; i
- 调用时只需传入具体逻辑:const safeFetch = withRetry(fetchUserById);
用工厂函数创建带配置的复用实例
当逻辑需要固定配置(如 API 基础路径、默认超时),用工厂函数返回定制化函数,避免每次重复传参。
- const createApiClient = (baseUrl, timeout = 5000) => ({ get: (path) => fetch(`${baseUrl}${path}`, { signal: AbortSignal.timeout(timeout) }), post: (path, body) => fetch(`${baseUrl}${path}`, { method: 'POST', body: JSON.stringify(body) }) });
- 使用:const githubApi = createApiClient('https://api.github.com'); githubApi.get('/users/octocat');
- 不同环境可生成不同实例:const prodApi = createApiClient('https://prod.api.com'); const devApi = createApiClient('https://dev.api.com');
用类封装有状态、多方法的复合逻辑(谨慎选择)
当复用逻辑涉及内部状态(如缓存、计数器)、多个协作方法,且需生命周期管理时,Class 更清晰。但注意:优先考虑组合而非继承。
- class CounterManager { constructor(initial = 0) { this.value = initial; this.history = []; } increment(by = 1) { this.value += by; this.history.push(this.value); return this; } reset() { this.value = 0; return this; } }
- 优势:方法共享状态、链式调用、可扩展(如加 onChange 钩子)
- 注意:若无需状态,仍应首选独立函数;类不是复用的默认解法
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











