javaScript函数是组织逻辑、避免重复、控制执行流的最小可靠单元,具参数输入、内部处理、结果返回及作用域隔离特性;function声明与箭头函数在this、arguments及new调用上存在关键差异;可复用函数需满足只做一件事、参数明确可控、输入输出清晰三大约束,并规避闭包污染、数据篡改、环境依赖等陷阱。

javascript 函数就是带名字或不带名字的可执行代码块
它不是语法糖,也不是“高级技巧”,而是 JavaScript 中组织逻辑、避免重复、控制执行流的最小可靠单元。函数能接收输入(参数)、内部处理、返回结果(或不返回),且天然支持作用域隔离——这意味着你在函数里声明的 let 或 const 不会污染外部环境。
用 function 声明还是箭头函数?关键看 this 和 arguments
二者行为差异直接影响复用性:
-
function声明的函数有自己绑定的this和arguments,适合需要动态上下文的场景(如事件处理器、对象方法) - 箭头函数没有自己的
this,它继承外层作用域的this;也没有arguments,得用剩余参数...args替代 - 如果函数要被当作构造函数调用(用
new),必须用function声明;箭头函数不能 new - 想让函数在不同对象上调用时仍保持原始逻辑(比如提取为工具函数),优先选箭头函数或显式绑定
.bind()
写可复用函数的三个硬约束
可复用 ≠ 写得短,而是“换个地方粘贴过去还能跑,且不容易出错”:
- 只做一件事:比如
formatCurrency就只格式化数字,别顺手塞进fetch请求或 dom 插入 - 参数明确、可控:避免依赖全局变量或隐式状态;用默认参数处理常见 fallback,例如
function debounce(fn, delay = 300) { ... } - 输入输出清晰:接受什么类型(
String?number?NULL?),返回什么(promise?undefined?抛错?)。必要时加简单类型校验:if (typeof input !== 'string') throw new TypeError('expected string');
容易被忽略的复用陷阱
很多函数看着能复用,一换环境就崩,问题往往出在这些地方:
立即学习“Java免费学习笔记(深入)”;
- 闭包捕获了外部 mutable 变量(比如一个不断变化的
count),导致多次调用互相干扰 - 函数内修改了传入的对象或数组(
obj.name = 'x'),破坏了调用方的数据一致性 - 用了浏览器专属 API(如
localStorage、document),却没做环境判断,导致 node.js 下直接报ReferenceError - 错误处理全靠
console.error,没抛错也没返回错误标识,调用方无法感知失败
真正可复用的函数,往往多几行防御性代码,少一点“我觉得它该这么用”的假设。