很多人初学 JavaScript第一周里最绕的往往不是语法本身而是“定义一个函数怎么有这么多写法”。function foo(){}、const foo function(){}、const foo () {}再加上参数、作用域、this、闭包、高阶函数一套组合拳下来很容易劝退。这篇内容源自 HoRain 云系列笔记里我整理了很久的《JavaScript 函数定义全攻略》专门把函数定义相关的核心知识点拆开讲透适合刚入门、正在系统学 JS 的读者也适合写过一阵子但总觉得 this 和行为逻辑没完全吃透的朋友。函数这东西说小了是封装一段逻辑说大了是整个 JS 代码组织的基石。组件能复用、事件能回调、异步流程能串起来全依赖函数跑得对不对。只要函数定义这关过了后面读框架源码、写业务、调 bug都会顺很多。下面我从最基本的三种定义方式开始一路讲到参数机制、作用域、闭包、this 指向、高阶函数和排错经验每一段都是能直接拿去用的实操内容。1. 函数定义的三种基本写法选型之前先把差异搞清1.1 function 声明有提升机制的“标准正字”最常见的定义方式是函数声明写起来是这样function greet(name) { return Hello, name; }这种写法的最大特点是存在函数提升Function Hoisting。也就是说你在代码里先调用它、后定义它也不会报错console.log(add(2, 3)); // 5 function add(a, b) { return a b; }原因是 JavaScript 引擎在正式执行代码之前会先把作用域里的函数声明收集好放进内存执行阶段只要按名查找就可以了。这个机制听起来方便但也会埋坑——如果一个大文件里到处是这种被提升的函数阅读时容易出现“这个函数到底从哪来的”的困惑。所以我个人建议函数声明适合放模块顶层、工具函数这类全局可复用的逻辑位置靠前、靠名字自解释不依赖定义顺序。还有一个容易忽略的细节函数声明的函数名在当前作用域内是强制存在的函数体内外部都可以用这个名字来引用它自己适合写递归function factorial(n) { return n 1 ? 1 : n * factorial(n - 1); }1.2 函数表达式赋值时才真正“活”起来的函数函数表达式可以理解为把函数当作值赋给一个变量const greet function (name) { return Hello, name; };定义函数表达式的过程发生在代码执行到这一行时所以在这之前调用它会抛出Cannot access greet before initialization对于 const 来说还要注意变量提升只有声明部分没有赋值部分。函数表达式还有两种常见形态匿名函数表达式、命名函数表达式。后者的函数名只在函数内部可见const factorial function fact(n) { return n 1 ? 1 : n * fact(n - 1); };这里我对命名函数表达式的经验是调试栈里能看到函数名fact而不是冷冰冰的anonymous排查调用链时清楚得多。不过实际项目里用得不算多大部分场景用箭头函数替代了。1.3 箭头函数语法糖背后的“三条硬限制”箭头函数是 ES6 里最受欢迎的新特性之一极简写法const greet (name) Hello, ${name}; const double x x * 2;单参数可以省略括号单行表达式会隐式返回。看起来很爽但必须记住三条硬性限制箭头函数没有自己的this它的this是定义时外层作用域的this。箭头函数内部没有arguments对象。箭头函数不能当作构造函数使用不能被new。这三条限制决定了箭头函数最擅长处理回调、闭包、事件 listener 这类“函数从哪里来不重要重要的是 this 保持稳定”的场景。1.4 三种方式怎么选我把它们放在一张表里对照你看一眼就明白差异了对比项function 声明函数表达式箭头函数提升行为整体提升不提升不提升自身 this动态绑定动态绑定词法绑定arguments有有没有可 new可以可以不可以典型场景顶层函数、递归IIFE、动态赋值回调、链式处理我的实用建议是顶层逻辑和对象方法优先用函数声明或函数表达式回调场景优先用箭头函数。对象方法里如果用了箭头函数this 很可能会跑到外层去最后得到 undefined 或者 window这是我在实际项目中踩过不止一次的坑后面 this 那一章会专门展开。2. 函数参数机制深度拆解传值、默认值、rest 与解构2.1 参数传的到底是值还是引用这个问题如果面试被问到答案不是二选一。基本类型number、string、boolean 等传的是值的副本函数内部随便改外部不受影响function changeAge(age) { age 30; } let myAge 25; changeAge(myAge); console.log(myAge); // 25对象类型传的是引用的副本。这里的重点是“引用的副本”不等于“对象的深拷贝”——你在函数里修改对象的属性外部能看到变化但你重新给参数变量赋一个新对象外部不会跟着变function updateUser(user) { user.name Tom; user { name: New }; // 这行不会影响外部 } const current { name: Jerry }; updateUser(current); console.log(current.name); // Tom这段逻辑很多人写过但没想透。理解它之后写函数时就会自然地想清楚到底要在函数内改动外部对象还是只读外部对象。如果不想让外部被修改最简单的办法就是在函数开头拷贝一份比如const copy { ...obj }深层结构还得用结构化克隆否则底层引用还是共享的。2.2 默认参数别在函数体里手动补头声明更干净老代码里常见的写法是function orderPrice(price, count) { count count || 1; return price * count; }||的短路逻辑在参数传 0 或空字符串时会出问题因为0 || 1的结果是 1。ES6 之后直接用默认参数function orderPrice(price, count 1) { return price * count; }这里有个细节默认参数是在函数被调用时才求值的。比如count getDefaultCount()每次调用都会执行getDefaultCount()不是定义时算一次。另外有默认值的参数建议放在参数列表靠后的位置不要让前面的必填参数夹在中间否则调用时很容易漏传function createUser(name, age 18, email) { // 不太好调用时 createUser(Tom, 20, ab.com) 没问题 // 但如果想用默认 age 就要 createUser(Tom, undefined, ab.com) }2.3 rest 参数和 arguments收集余下参数的正确姿势rest 参数用三个点收集“剩余参数”它本身就是数组function logAll(prefix, ...rest) { console.log(prefix, rest.length); } logAll(, 1, 2, 3); // 3arguments是函数内部自动存在的类数组对象包含所有实参。但它不是真正的数组没有map、forEach这些数组方法。ES6 之后我的习惯是用 rest 参数取代arguments更直观也规避了箭头函数没有arguments的问题。关于arguments还有一个大多数教程不讲的细节非严格模式下arguments里的值会和命名参数联动严格模式下则相互独立。这个行为非常容易被忽略所以我在项目里的处理原则是不在函数体内直接用arguments取值做复杂逻辑真要处理先转成数组再说。2.4 对象解构参数配置项的正确打开方式一个函数接收三四个必填参数还勉强能接受一旦增长到五六个调用方根本记不住顺序。实际项目中更推荐传一个配置对象配合解构function init(options) { const { host localhost, port 80, https false } options; return http${https ? s : }://${host}:${port}; } init({ https: true, host: example.com });甚至可以连参数一起解构调用方直接传对象函数签名里就把字段声明清楚function init({ host localhost, port 80, https false } {}) { return ${https ? https : http}://${host}:${port}; }注意我给整个解构对象加了 {}作为默认值不然调用init()不传参数时会直接报错。这种模式在框架代码里极其常见建议尽早习惯。3. 作用域、提升与闭包函数定义背后的“隐形规则”3.1 词法作用域函数能看到什么由定义位置决定JavaScript 的作用域是词法作用域函数内部能访问哪些变量取决于这个函数在代码里的定义位置而不是调用时的位置let a 1; function outer() { let b 2; function inner() { let c 3; console.log(a, b, c); // 1 2 3 } inner(); } outer();这个“由内向外逐层找变量”的规则很接近日常直觉但真正的坑来自var的函数作用域和let/const的块级作用域差异。var在条件语句、for 循环里声明实际上会在整个函数内生效let/const则被限制在代码块内。很多人写循环时踩过这样的坑for (var i 0; i 3; i) { // some logic } console.log(i); // 3var 泄漏到了外面用let声明循环变量就能避免把i漏到循环外。我在新代码里基本不用var这一条建议同样适用于绝大多数现代项目。3.2 闭包内层函数抓住了外层作用域闭包是 JavaScript 里被讲得最玄但其实很朴素的概念。一个函数被定义在另一个函数内部并且内部函数引用了外部函数的变量那么即使外部函数执行完毕这些变量依然会被内部函数“抓住”不释放这就是闭包。实践里最常见的闭包场景就是工厂函数function createCounter() { let count 0; return function () { count 1; return count; }; } const counter createCounter(); counter(); // 1 counter(); // 2count不会因为createCounter()执行完就消失因为它被返回的那个匿名函数继续引用着。闭包用于封装私有状态非常好用但要警惕两个问题一是闭包长期持有外层变量会占用内存二是循环变量闭包陷阱。// 经典问题 for (var i 0; i 3; i) { setTimeout(() console.log(i), 0); } // 输出 3 3 3这里三个箭头函数捕获的是同一个i循环结束后i已经变成 3。用let声明i就能得到 0 1 2因为let每次循环都会创建一个新的块级绑定每次迭代的闭包抓到不同值。早年间还用 IIFE 来破解这个问题现在直接let就好。3.3 IIFE定义完立刻执行保护作用域的老功臣IIFE立即执行函数表达式的写法是把函数表达式用括号包起来然后立刻调用(function () { const local 只在函数内部存在; })();它的核心价值是隔离作用域。比如你引入了一个老脚本里面定义了一堆全局变量很容易和业务代码冲突把这段逻辑包进 IIFE 里变量就进不了全局作用域。ES6 有了块级作用域和模块系统之后IIFE 的使用频率降了不少但在写一些工具脚本、避免全局污染时依旧管用。另外IIFE 内部函数可以配合闭包做私有变量对外只暴露方法这算是模块模式的雏形const store (function () { let state {}; return { get(key) { return state[key]; }, set(key, value) { state[key] value; } }; })();4. this 到底指向谁动态绑定与词法绑定的博弈4.1 四种调用规则一次理清this 的指向不看函数定义在哪里而看函数如何被调用。我把常见情况归纳成下面这张对照表调用场景示例this 指向普通函数调用foo()window严格模式为 undefined对象方法调用obj.foo()objcall/apply/bind 显式指定foo.call(ctx)ctxnew 调用new Foo()新建的实例对象代码演示下对象方法调用const user { name: Tom, say() { console.log(this.name); } }; user.say(); // Tom const say user.say; say(); // undefined因为函数被单独拿出来调用this 丢了这就是动态绑定最让人头疼的地方你写的时候this明明指向user一旦把方法拆出来传给其他函数this就丢了。4.2 显式绑定 call、apply、bind 的区别call和apply都是立即执行函数区别只在传参方式call传参数列表apply传数组。bind不立即执行而是返回一个新的、this被固化的函数function introduce(a, b) { console.log(${this.name} says ${a} and ${b}); } introduce.call({ name: Tom }, hi, bye); introduce.apply({ name: Tom }, [hi, bye]); const bound introduce.bind({ name: Tom }, hi, bye); bound();实际中很有用的场景是先把函数bind到某个对象上再传给事件回调里this就不会跑偏。但我个人更倾向箭头函数方案因为bind会让堆栈里的函数名变长不太利于排查。4.3 箭头函数里的 this 是“继承”来的箭头函数没有自己的this它从定义时的外层作用域里抓一个this下来。这句话换个说法就是箭头函数的this在定义时就固定了之后无论用call、apply、bind都没法再改。所以对象方法千万别图省事写箭头函数因为箭头函数里的this不再指向调用它的对象而是指向外层作用域const user { name: Tom, say: () { console.log(this.name); // undefined } };正确的用法是在事件回调、定时器回调这类逻辑里利用箭头函数把外层this固定住const user { name: Tom, init() { setTimeout(() { console.log(this.name); // Tom箭头函数保存了 init 调用时的 this }, 1000); } };如果在定时器里用普通函数this默认指向 window就得先在外面const that this再引用that或者用bind。这三种修复方案我在不同项目里都用过箭头函数最省心。5. 高阶函数与实用模式让函数定义水平再上一个台阶5.1 回调函数与数组迭代器一箭双雕把函数作为参数传给另一个函数被传入的函数就是回调函数接收回调的函数就是高阶函数。这个模式在数组方法里得到了极致应用const items [ { name: A, price: 10 }, { name: B, price: 20 }, ]; const total items .filter(item item.price 5) .map(item item.price) .reduce((sum, price) sum price, 0);这段代码用三个函数式方法完成了筛选、映射、求和。重点看每个回调都保持简短、无副作用数据从一端进另一端出读起来就像流水线。我在代码评审时最看重的就是这类写法如果函数回调里塞了太多状态修改很快会变成一座难以维护的“面条工厂”。5.2 防抖与节流闭包在性能优化上的招牌应用搜索输入框每次敲键盘都请求接口页面会卡到想哭。防抖和节流就是从函数定义层面解决这个问题的经典方案。防抖连续触发时只在最后一次触发后等待一段时间再执行。function debounce(fn, delay 300) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() fn.apply(this, args), delay); }; } const onSearch debounce((keyword) { console.log(search, keyword); });节流固定时间间隔内只执行一次。function throttle(fn, interval 300) { let last 0; return function (...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }这两个函数本身就是闭包落地的代表作——timer和last被返回的函数持续引用着才能实现状态的跨调用保存。能用 10 行代码讲清闭包价值这算是最直观的案例。5.3 函数组合与抽象边界当你有一堆短小函数时组合它们就是最自然的演进。比如把多个工具函数串起来就能得到一个“管道”式的新函数const compose (...fns) (initial) fns.reduceRight((value, fn) fn(value), initial); const addTax price price * 1.1; const formatPrice price $${price.toFixed(2)}; const totalPrice compose(formatPrice, addTax); totalPrice(100); // $110.00不过我要提醒一句抽象边界要克制。写业务代码时如果某个函数只有一个地方用到我不急着把它抽出来组合等它被用到三次以上再抽不迟。强行抽象只会让代码多出一层无意义的中间件。业内常说的 Rule of Three 就是这个意思搬到 JavaScript 函数设计上也完全适用。6. 常见报错与排查实录函数相关的坑我替你踩了一遍6.1 高频报错速查表下面这些报错和现象在写函数相关代码时出现频率极高我把症状、原因和修复思路整理成一张速查表报错 / 现象常见原因排查与修复xxx is not defined函数或变量未声明或作用域不可见检查拼写、定义位置、是否被块级作用域隔离Cannot access x before initialization在 let/const 声明前访问把调用移到声明之后fn is not a function期望函数的值变成了 undefined 或其他类型打印该值确认类型检查函数是否被覆盖、是否传参错误Cannot read property x of undefinedthis丢失或异步数据尚未到达就取值检查调用方式、加上空值判断Maximum call stack size exceeded递归没有终止条件或死循环调用检查递归出口加日志看执行路径Cannot use new on an arrow function对箭头函数使用 new改为函数声明或函数表达式6.2 几个不容易定位的特殊场景第一类是我见过最多的人手抖问题事件回调里的this丢失。为什么会丢失因为element.addEventListener(click, obj.method)这一行里method被直接传给了事件系统调用时前面没有对象this就变成了全局对象。处理方案就是套箭头函数element.addEventListener(click, (e) obj.method(e));第二类是异步回调里取不到数据。很典型的场景你在组件初始化时发起请求还没等响应回来就拿着undefined去读属性。排查思路很简单在回调的第一行打印数据确认是数据没到、结构不对还是程序逻辑提前执行了。第三类是javascript:void(0)之类让人迷惑的表达式。void运算符会执行后面的表达式并返回undefined所以它在某些跑在地址栏或伪协议场景里的函数定义中负责“执行一段逻辑但让页面不跳转”。如果你遇到页面点击后没反应先看是不是这个伪协议被误用或者绑定的函数内部报错被吞掉了。这类问题多半和事件处理、函数调用栈相关直接用浏览器控制台打断点比肉眼猜更快。6.3 排查函数问题时的实操思路我的排查顺序通常是这样打开控制台看报错信息它往往直接告诉你函数名、文件和行号。在可疑函数调用处加console.log打印参数、打印this。如果函数是异步回调里的重点确认执行顺序必要时用断点暂停在回调里看调用栈。确定是函数本身逻辑问题还是外层层面的错误再用二分法缩小范围注释掉一半逻辑看问题是否消失。在团队协作中我还会在函数入口处做必要的防御对不确定的参数加上校验。这不是怂而是函数定义了之后调用方未必总会按你的预期传值给自己留一条清晰的报错路径比让错误在底层炸成一团面目全非的堆栈舒服得多。写在最后的个人体会写函数的经验积累到今天我最大的体会是不要在函数设计上过早追求花哨先把声明方式、参数、作用域、this 这四件事吃透再看高阶技巧会顺畅得多。很多新人在箭头函数上栽跟头不是语法不懂而是没有理解“词法 this”和“动态 this”的根本差异。如果你现在正被某个函数相关问题卡住我建议你先做一件事把出问题的函数独立拿出来用一个最小复现用例跑一遍往往问题自己就浮出水面了。等确认了是 this 丢失还是作用域隔离出了问题再来对照这篇文章里的排查表基本都能找到方向。函数定义本身不难难的是在各种真实调用场景里保持稳定的行为这也是我持续整理这类笔记的原因。