1. 概念与基本区别
1.1 语法差异与用法
在前端开发中，箭头函数提供了更简洁的语法，但它与普通函数在多方面存在本质差异。最直观的差别在于语法简化：箭头函数通常省略function关键词，参数只有圆括号与箭头，返回值可以省略return。与此同时，这是它们在调用和上下文绑定上的关键特性。
// 普通函数
function sum(a, b) { return a + b; }// 箭头函数
const sumArrow = (a, b) => a + b;console.log(sum(1, 2)); // 3
console.log(sumArrow(1, 2)); // 3
通过这个对比可以看到，箭头函数的语法更紧凑，但并非在所有场景都能替代普通函数。后续的章节将展开它们在
1.2 作用域与 this
箭头函数没有自己的 this，它们的 this 是从外层最近的普通函数或全局作用域中“词法绑定”的。这使得箭头函数在嵌套回调中更易于使用，因为不需要显式绑定。相反，普通函数的 this 则绑定到调用它的对象，或者在严格模式下绑定为 undefined。
const obj = {value: 42,// 普通函数 this 指向调用它的对象regular: function() { return this.value; },// 箭头函数 this 绑定自外层作用域（这里是全局/模块作用域）arrow: () => this.value
};console.log(obj.regular()); // 42
console.log(obj.arrow()); // undefined（此处的 this 取决于外部作用域）
要点在于 this 的绑定来源：普通函数根据调用方式改变指向，箭头函数则锁定在定义处的作用域。这决定了在某些场景下箭头函数比普通函数更省心，例如在回调中保证外层 this 不被重新绑定。
1.3 参数和对象的可用性
另一个区别在于 参数对象 (arguments) 的可用性。普通函数具备 arguments 对象，用于获取调用时的实参集合；箭头函数则没有自己的 arguments，需要使用 rest 参数来获取参数。这样可以避免一些非预期的参数处理。
function normal() {console.log(arguments);
}
const arrow = (...args) => console.log(args);normal(1, 2, 3); // Arguments { '0': 1, '1': 2, '2': 3 }
arrow(1, 2, 3); // [1, 2, 3]
总结要点：如果需要访问调用时的实参，普通函数更天然；如果你需要在回调中避免显式绑定，箭头函数更简洁。
2. 行为对比：this、arguments、原型链
2.1 this 的绑定规则
对 this 的理解是区分箭头函数与普通函数的核心：普通函数的 this 取决于调用方式，可能指向调用对象、全局对象或 undefined（严格模式）。而箭头函数的 this 来自它们的定义环境，不会因为调用方式的改变而改变。
const obj = {v: 1,f: function() { return this.v; } // this 指向 obj
};console.log(obj.f()); // 1const unbound = obj.f;
console.log(unbound()); // undefined（严格模式）或全局对象的 v// 箭头函数的 this 来自外层作用域
const outer = { v: 2 };
const inner = () => outer.v;
console.log(inner()); // 2
要点在于 this 的“来源”不同，导致在同一结构中混用时容易出错。
2.2 原型链与构造行为
箭头函数没有自己的原型对象，因此它不能被用作构造函数；这也是 arrow 不能和 new 一起使用的重要原因。普通函数则具备原型链和构造能力，能通过 new 生成实例。这影响到你在面向对象设计中的函数选型。
function Regular() { this.x = 1; }
const Arrow = () => { this.x = 2; };console.log(typeof Regular.prototype); // object
console.log(typeof Arrow.prototype); // undefinedtry { new Arrow(); } catch (e) { console.log('箭头函数不能作为构造函数'); }
结论是：如果需要构造函数能力，选择普通函数；若仅为回调/绑定环境，箭头函数更合适。
此外，箭头函数也没有自己的原型链属性，这影响到一些继承和原型相关的实现方式。对于需要通过原型继承的行为，普通函数提供了更自然的路径。
关于参数对象与 this 的组合使用场景，需要谨慎设计，避免在箭头函数中误用 this 和原型相关的特性。
2.3 rest 与 spread 的行为差异
尽管箭头函数本身对 rest/spread 的支持与普通函数相似，但在某些早期环境下对参数捕获的行为会略有差异。因此，在复杂的参数处理场景下，应优先使用显式的 rest 参数来获取参数集合，确保兼容性和可读性。优先通过 rest 参数显式获取参数，避免对 arguments 的隐式依赖。
function normal(a, b, ...rest) {console.log(a, b, rest);
}
const arrow = (a, b, ...rest) => {console.log(a, b, rest);
};normal(1, 2, 3, 4); // 1 2 [3, 4]
arrow(1, 2, 3, 4); // 1 2 [3, 4]
在参数处理方面，箭头函数与普通函数并无本质性能差异，重在编码规范和可读性。
3. 实战场景：何时使用箭头函数，何时使用普通函数
3.1 回调与事件处理中的箭头函数
在回调和事件处理场景中，箭头函数的 lexical this可以避免经常性地使用 bind() 去绑定 this，提升代码的可读性和可维护性。尤其是在类方法或模块函数中作为回调时，箭头函数能保持外层对象的上下文。
class Timer {constructor() { this.count = 0; }start() {// 使用箭头函数，this 保持为 Timer 实例setInterval(() => {this.count++;console.log(this.count);}, 1000);}
}
new Timer().start();
技巧要点在于避免回调中失去对外部上下文的引用，这通常会让状态更新或 UI 操作变得复杂。
3.2 对象方法与构造行为
在对象方法中，普通函数能够让 this 指向对象本身，适合返回与对象状态相关的值；箭头函数则会绑定到外层作用域的 this，导致在对象方法中使用箭头函数时需谨慎。如果需要方法直接访问对象自身的属性，请优先使用普通函数。
const obj = {v: 10,// 普通方法getV: function() { return this.v; },// 箭头函数作为同一对象中的方法，会捕获外部 thisgetVArrow: () => this.v
};console.log(obj.getV()); // 10
console.log(obj.getVArrow()); // undefined（this 指向外部作用域）
3.3 类中的方法定义与实例行为
在类的设计中，普通方法是最常见的选择，因为它们的 this 会随着实例来绑定；若希望方法的 this 始终绑定到某个实例，箭头函数作为实例属性在某些框架中也很常用，但需要留意原型链与内存开销。常规实践是使用普通方法作为类的实例方法，必要时结合箭头函数实现特定回调绑定。
class Person {constructor(name) { this.name = name; }// 普通方法：this 指向实例greet() { return `Hi, I am ${this.name}`; }
}// 箭头函数作为实例属性，this 固定在创建时的实例
class PersonArrow {constructor(name) {this.name = name;this.greet = () => `Hi, I am ${this.name}`;}
}
const p = new Person('Alice');
console.log(p.greet()); // Hi, I am Aliceconst pa = new PersonArrow('Bob');
console.log(pa.greet()); // Hi, I am Bob
4. 性能与兼容性
4.1 性能对比与最佳实践
在多数前端应用中，箭头函数与普通函数的性能差异通常微乎其微，性能优化应聚焦于算法和渲染路径，而非单纯切换函数类型。不过，创建大量箭头函数（例如在高频回调中频繁创建）可能会带来微弱的 GC 开销，应该结合实际场景评估。
// 性能考虑：避免在热路径中每次渲染都创建新箭头函数
// 不推荐：
array.map((item) => item.value);// 推荐：在外部保存回调或使用普通函数
function extract(item) { return item.value; }
array.map(extract);
实践要点是降低不必要的函数创建，提升渲染和交互性能。
4.2 浏览器兼容性与转译
箭头函数是 ES6 的特性，现代浏览器普遍支持，但对旧浏览器需要通过转译工具（如 Babel、TypeScript）进行编译，以实现向下兼容。团队在构建发布阶段应明确 target/polyfill 配置，确保用户端体验一致。在需要支持旧环境时，使用转译 plus 运行时补丁是常规做法。
// 使用 TypeScript 或 Babel 转译
// 源代码
const fn = (a, b) => a + b;// 转译后在目标环境仍然可用
5. 实操技巧清单
5.1 快速决策要点
快速判断原则：如果你需要保留上层 this、传递回调到外部上下文，且不需要作为构造函数，则优先考虑箭头函数；如果需要实例化、绑定到调用对象或使用 arguments、prototype、super 等特性，应该选用普通函数。
实际代码层面的应用建议包括：在回调和事件处理的常规场景优先使用箭头函数以简化 this 的绑定；在对象方法、构造函数、或需要动态绑定 this 的场景使用普通函数。
// 快速示例：回调中保留外层 this
class UI {constructor() { this.clicks = 0; }bind() {document.addEventListener('click', () => {this.clicks++;console.log(this.clicks);});}
}// 普通函数回调在需要明确 this 指向对象时使用
const obj = {v: 1,log: function() {console.log(this.v);}
};
document.addEventListener('click', obj.log.bind(obj));
5.2 代码风格与团队约定
团队在代码风格上应统一箭头函数和普通函数的使用边界，避免随意在对象方法中混用，造成 this 指向混乱。建议的实践包括：将回调和事件处理中的短函数优先写成箭头函数，以稳定 this；将需要作为构造函数、具有独立 this 与 prototype 的函数保留为普通函数；对参数处理使用 rest 参数，减少对 arguments 的隐式依赖。
在项目中还应明确文档化的约定，如“回调优先使用箭头函数，构造函数使用普通函数”等，以提升代码一致性与可维护性。
