javascript函数如何定义与调用_箭头函数与传统函数有哪些不同点【教程】

函数定义分传统函数和箭头函数：传统函数可提升、有this/arguments/new.target，支持new调用；箭头函数无this绑定、无arguments和new.target，不可new，适合简单回调。

函数定义和调用的两种写法必须分清场景

javaScript 里定义函数不是只有 function 一种方式，const fn = () => {} 这种箭头函数写法在日常开发中更常见，但不能无脑替换。关键看是否需要 this、arguments 或作为构造函数使用。

传统函数声明：function add(a, b) { return a + b; }，可被提升（hoisted），能直接在定义前调用；而函数表达式（含箭头函数）不会被提升，必须先定义再调用。

• 需要动态绑定 this（比如事件回调、对象方法）→ 用传统函数
• 只是简单计算或作为回调传入（如 map、Filter）→ 箭头函数更简洁且避免 this 失效
• 要通过 new 实例化 → 只能用传统函数，箭头函数会报 TypeError: xxx is not a constructor

箭头函数没有自己的 this，这点必须手动验证

箭头函数不绑定 this，它沿作用域链向上找外层函数的 this 值。这个特性在对象方法或事件监听器中极易出错。

比如：

立即学习“Java免费学习笔记（深入）”；

const obj = {   name: 'test',   regular() { console.log(this.name); }, // 输出 'test'   arrow: () => { console.log(this.name); } // 输出 undefined（this 指向全局或 module.exports） };

• 在类的实例方法中误用箭头函数 → this 指向错误，无法访问实例属性
• 给 dom 元素绑定事件时，若用箭头函数，this 不再是触发元素，而是定义时的作用域
• 调试时可在函数内加 console.log(this) 快速确认绑定结果

arguments 和 new.target 在箭头函数里根本不存在

传统函数内部可用 arguments 获取所有实参，箭头函数里访问 arguments 会报 ReferenceError。同理，new.target 在箭头函数中也无效。

替代方案很明确：

• 用剩余参数 ...args 替代 arguments（兼容性更好，语义更清晰）
• 需要判断是否被 new 调用 → 必须用传统函数，箭头函数天生不支持
• 想在高阶函数里透传参数？别用 arguments，改用 ...args 解构再展开

return 隐式与换行陷阱得靠格式和括号兜底

箭头函数单表达式可省略 {} 和 return，但一旦换行就容易出错。js 自动插入分号（ASI）会导致返回 undefined。

比如：

立即学习“Java免费学习笔记（深入）”；

const getObj = () =>    { a: 1 }; // 实际返回 undefined！因为换行后自动插入分号，{a: 1} 被当成代码块而非对象字面量

• 想返回对象字面量 → 必须用小括号包裹：() => ({ a: 1 })
• 多行逻辑必须显式写 {} 和 return，别依赖隐式返回
• 团队代码规范建议：所有箭头函数统一用 {} + return，避免歧义和协作风险

最常被忽略的是嵌套箭头函数里的 this 链式捕获，以及对象方法中混用两种函数导致的上下文断裂——这些不会报错，但运行时行为和预期差很远。