JavaScript函数定义与参数传递详解

从现在开始，我们要努力学习啦！今天我给大家带来《JavaScript函数定义与参数传递教程》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

优先用function声明需提前调用的函数，用函数表达式处理回调、导出等场景；JS按共享传递，原始类型传值、对象传地址副本；箭头函数无this且不可构造。

函数声明和函数表达式怎么选

JavaScript 里定义函数主要就两种方式：function 声明和函数表达式。声明会提升（hoist），意味着你可以在定义前调用它；表达式不会，必须先赋值再调用。

常见错误是以为 const myFn = function() {} 和 function myFn() {} 行为一致，结果在声明前调用时报 ReferenceError 或 TypeError。

• 需要立即可用、逻辑清晰的入口函数，优先用 function 声明
• 要传给 setTimeout、map 或作为模块导出时，用函数表达式更安全
• 箭头函数是表达式的一种，没有自己的 this 和 arguments，不能用作构造函数

参数传递：值 vs 引用，还有 rest 参数

JS 没有真正的“引用传递”，只有“按共享传递”——原始类型（string、number、boolean）传的是副本；对象、数组、函数传的是内存地址的副本。改对象属性会影响原对象，但重新赋值不会。

容易踩的坑：function foo(arr) { arr = [1,2]; } 不会改变外部数组；而 arr.push(3) 会。

• 用 ...args 接收不定数量参数，比 arguments 更灵活且是真数组
• 默认参数写在形参列表里，如 function fn(a = 1, b = [])，注意避免 b = b || [] 这种老写法（false、0、'' 都会被覆盖）
• 解构参数可直接从对象或数组取值，比如 function({ name, age }) { return `${name} is ${age}`; }

return 语句到底返回什么

没写 return 的函数默认返回 undefined；写了但后面没值（如 return;）也一样。常见错误是忘了在条件分支里都写 return，导致部分路径返回 undefined。

比如异步函数里写 return fetch(...).then(...)，实际返回的是 Promise，不是 then 里的值——得用 async/await 或链式 return 才能穿透。

• 单表达式箭头函数省略 return 和花括号，但若返回对象字面量，必须加括号：() => ({ a: 1 })，否则被解析成代码块
• return 后换行会导致自动插入分号，return 后接对象或数组字面量时务必写在同一行
• 函数内多个 return 是合法的，适合提前退出，比如校验失败直接 return null

箭头函数和普通函数的关键区别

箭头函数没有 this、arguments、super 或 new.target，它的 this 指向外层词法作用域。所以不能用作事件回调并期望 this 指向 DOM 元素，也不能用 call/apply 改变 this。

典型误用：document.addEventListener('click', () => console.log(this)) —— 这里 this 是全局或模块顶层，不是触发事件的元素。

• 需要动态 this（如 Vue 方法、React 类组件事件处理）必须用普通函数
• 闭包中捕获外层变量更简洁，比如 list.map(x => x * factor)，不用显式写 function(x) { return x * factor; }
• 不能用 new 调用箭头函数，否则报 TypeError: xxx is not a constructor

函数体内的执行逻辑越简单，越容易预测返回值和副作用；参数设计是否合理，往往比语法细节更能决定后期维护成本。别为了省几行代码把参数塞成一个大对象，也别在箭头函数里强行模拟 this 绑定。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript函数定义与参数传递详解》文章吧，也可关注golang学习网公众号了解相关技术文章。