javascript函数如何定义_怎样传递参数和返回值【教程】

12次阅读

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

javascript函数如何定义_怎样传递参数和返回值【教程】

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

javaScript 里定义函数主要就两种方式:function 声明和函数表达式。声明会提升(hoist),意味着你可以在定义前调用它;表达式不会,必须先赋值再调用。

常见错误是以为 const myFn = function() {}function myFn() {} 行为一致,结果在声明前调用时报 ReferenceErrorTypeError

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

参数传递:值 vs 引用,还有 rest 参数

JS 没有真正的“引用传递”,只有“按共享传递”——原始类型(StringnumberBoolean)传的是副本;对象、数组、函数传的是内存地址的副本。改对象属性会影响原对象,但重新赋值不会。

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

立即学习Java免费学习笔记(深入)”;

  • ...args 接收不定数量参数,比 arguments 更灵活且是真数组
  • 默认参数写在形参列表里,如 function fn(a = 1, b = []),注意避免 b = b || [] 这种老写法(false0'' 都会被覆盖)
  • 解构参数可直接从对象或数组取值,比如 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

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

箭头函数没有 thisargumentssupernew.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 绑定。

text=ZqhQzanResources