函数定义分传统函数和箭头函数:传统函数可提升、有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 链式捕获,以及对象方法中混用两种函数导致的上下文断裂——这些不会报错,但运行时行为和预期差很远。











