javascript函数如何定义_怎样编写可重用的函数代码【教程】

javaScript函数可重用性关键在参数设计、副作用控制和边界处理：优先用箭头函数写工具函数，递归场景用函数声明；长参数改配置对象解构；避免隐式依赖和副作用，输入输出需明确可预测。

javascript 函数不是“写一次就完事”的工具，可重用性的关键不在语法形式，而在参数设计、副作用控制和边界处理。

函数声明 vs 箭头函数：什么时候该用哪一种

声明式函数（function foo() {}）会被提升，能被调用在定义之前；箭头函数（const foo = () => {}）不会提升，且没有自己的 this 和 arguments。如果你写的是工具函数（比如格式化日期、深克隆），优先用箭头函数 + const 声明，避免意外覆盖；如果函数需要递归调用自身（如树遍历），必须用函数声明——因为箭头函数没有函数名，无法在内部安全引用自己。

• 需要 arguments 对象？只能用传统函数声明
• 作为事件处理器且需访问 dom 元素的 this？传统函数更可控（或显式 .bind()）
• 用于 map/Filter 等高阶函数？箭头函数更简洁，避免 function 冗余嵌套

参数设计：别让调用方猜你要什么

避免长参数列表（超过 3 个就危险），尤其当其中部分参数常为 undefined 或默认值时。改用单个配置对象：

// ❌ 容易记混顺序，调用时一堆 undefined formatdate(date, 'yyYY-MM-DD', true, false, 'UTC')  // ✅ 明确意图，新增字段不影响旧调用 formatDate(date, { format: 'YYYY-MM-DD', withTime: true, utc: true })

同时，在函数内部用解构 + 默认值兜底：

立即学习“Java免费学习笔记（深入）”；

function formatDate(date, { format = 'YYYY-MM-DD', withTime = false, utc = false } = {}) {   // 实现逻辑 }

• 必填参数仍建议保留为独立形参（如 date），增强调用时的错误提示
• 配置对象本身设默认值 = {}，防止传 undefined 导致解构报错
• 避免在默认值里写复杂表达式（如 new Date()），它会在每次调用时重复执行

避免隐式依赖和副作用：重用的前提是“可预测”

一个函数若读取或修改外部变量（如全局 localStorage、DOM 节点、模块级计数器），就很难被复用或测试。例如：

// ❌ 隐式依赖 document，无法脱离浏览器环境 function toggleMenu() {   document.getElementById('menu').classlist.toggle('open') }  // ✅ 输入输出明确，行为可预测 function toggleClass(element, className) {   element.classList.toggle(className)   return element }

• 把 DOM 元素、API URL、配置项等都作为参数传入，而非在函数内硬编码或从闭包捕获
• 不修改传入的对象/数组（除非函数名明确表示，如 sortByInPlace()），优先返回新数据
• 异步函数统一返回 promise，不要在内部直接 .then() 或操作 ui

真正难的不是写出语法正确的函数，而是判断哪些状态该由调用方负责、哪些该封装进函数内部——这个分界线划错了，再“通用”的函数也会在第二个项目里失效。