17370845950

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');

容易被忽略的复用陷阱

很多函数看着能复用，一换环境就崩，问题往往出在这些地方：

• 闭包捕获了外部 mutable 变量（比如一个不断变化的 count），导致多次调用互相干扰
• 函数内修改了传入的对象或数组（obj.name = 'x'），破坏了调用方的数据一致性
• 用了浏览器专属 API（如 localStorage、document），却没做环境判断，导致 Node.js 下直接报 ReferenceError
• 错误处理全靠 console.error，没抛错也没返回错误标识，调用方无法感知失败

真正可复用的函数，往往多几行防御性代码，少一点“我觉得它该这么用”的假设。