JavaScript 中箭头函数与普通函数作为方法定义时的区别

箭头函数不能安全用作对象方法，因其无独立this、不可new调用、无arguments；普通函数则具备这些特性，适合定义对象方法。

箭头函数不能安全地用作对象方法，普通函数才是对象方法的合理选择。核心问题在于 this 的绑定机制完全不同：普通函数在作为方法调用时，this 自动指向调用它的对象；箭头函数没有自己的 this，它会继承定义时外层作用域的 this，而这个值往往不是你期望的对象实例。

对象方法中 this 指向差异明显

普通函数作为对象方法时，this 由调用方式决定——谁调用，this 就指向谁：

• obj.method() → this 是 obj
• const fn = obj.method; fn() → this 是全局或 undefined（严格模式）

箭头函数则无视调用位置，只看定义时所在词法作用域的 this：

• 若定义在全局作用域，this 通常是 window 或 undefined
• 若定义在某个普通函数内部，this 继承该普通函数的 this
• 它永远无法通过 call、apply、bind 改变 this

无法访问 arguments 对象

普通函数自动提供类数组的 arguments 对象，可用于处理不定参数：

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

• function sum() { return Array.from(arguments).reduce((a, b) => a + b, 0); }

箭头函数没有 arguments 绑定，访问会报 ReferenceError：

• 必须改用剩余参数 (...args) 替代
• 例如：const sum = (...args) => args.reduce((a, b) => a + b, 0);

不能用 new 调用，也没有 prototype

普通函数有 prototype 属性，支持构造函数用法：

• function Person(name) { this.name = name; }
• new Person('Alice') 可创建实例

箭头函数不具备这些能力：

• 没有 prototype 属性
• 调用 new () => {} 会直接抛出 TypeError: xxx is not a constructor
• 因此它天然不适合定义需要实例化的对象方法逻辑

语法简洁但语义受限

箭头函数写法更短，适合简单回调或计算表达式：

• const getName = () => this.name; —— 这里的 this 不是对象本身，而是外层上下文
• const items = list.map(item => item.value); —— 正确且推荐的使用场景

但在对象方法定义中，这种简洁性是以牺牲正确 this 绑定为代价的：

• 错误示例：const obj = { name: 'test', log: () => console.log(this.name) }; → 输出 undefined
• 正确做法：log() { console.log(this.name); } 或 log: function() { console.log(this.name); }