JavaScript箭头函数与普通函数的区别

JavaScript箭头函数与普通函数的核心区别体现在this指向、arguments对象和构造函数能力上，具体如下：

this绑定机制
普通函数：this动态绑定，取决于调用方式。例如：
作为对象方法调用时，this指向对象本身；
独立调用时，非严格模式下指向全局对象（如window），严格模式下为undefined；
通过call/apply/bind调用时，this显式绑定到指定对象。
箭头函数：没有自己的this，继承定义时外层作用域的this值，且不可更改。例如：
在对象方法中使用setTimeout时，箭头函数的this仍指向外层对象，避免手动绑定（如var self = this）。
arguments对象
普通函数：拥有类数组的arguments对象，包含所有传入参数，适合处理不定数量参数（但ES6推荐用剩余参数替代）。
箭头函数：没有自己的arguments对象，访问时会向上查找外层普通函数的arguments。若需参数处理，应使用ES6剩余参数（...args），返回真实数组，可直接调用数组方法。
构造函数能力
普通函数：可通过new调用，作为构造函数创建实例，拥有prototype属性和[[Construct]]内部方法。
箭头函数：不能作为构造函数，用new调用会抛出错误，因其缺少prototype和[[Construct]]，设计初衷并非用于实例化。

使用场景建议

优先用箭头函数：
回调函数（如map/filter/setTimeout），避免this绑定问题；
短小单行函数（隐式返回简化代码）；
不关心this或需固定this的场景（如模块辅助函数）。
优先用普通函数：
对象方法（需访问对象属性，this指向对象本身）；
构造函数（需创建实例，或使用ES6的class）；
需直接操作arguments的旧代码（但推荐用剩余参数替代）；
动态this上下文（如库/框架中需通过调用方式决定this的场景）。

示例对比

this绑定
// 普通函数：setTimeout回调中this指向window（非严格模式）const obj1 = { name: '普通函数', greet() { setTimeout(function() { console.log(this.name); }, 100); // 输出undefined或window.name}};// 箭头函数：继承外层this，指向obj2const obj2 = { name: '箭头函数', greet() { setTimeout(() => { console.log(this.name); }, 100); // 输出"箭头函数"}};
arguments处理
// 普通函数：直接访问argumentsfunction regularFunc() { console.log(arguments); } // 输出[1, 2, 3]// 箭头函数：用剩余参数替代const arrowFunc = (...args) => { console.log(args); }; // 输出[4, 5, 6]

总结箭头函数以简洁语法和固定this简化了回调场景，但牺牲了动态this、arguments和构造函数能力。普通函数则更灵活，适合需要动态上下文或实例化的场景。理解两者差异可帮助选择更合适的函数形式，提升代码健壮性。

热门标签