箭头函数语法更简洁，不绑定this、arguments，不能作为构造函数，适合用于回调和保持this上下文；传统函数功能更完整，适用于需要独立this或构造实例的场景。
箭头函数是ES6引入的一种更简洁的函数书写方式，它与传统函数在语法、this指向、使用场景等方面存在明显差异。理解这些区别有助于写出更清晰、不易出错的代码。
1. 语法更简洁
箭头函数省略了function关键字和return语句（单行表达式时），让代码更紧凑。
传统函数：
function add(a, b) {
return a + b;
立即学习“Java免费学习笔记（深入）”；
}
箭头函数：
const add = (a, b) => a + b;
当参数只有一个时，括号可省略：
const square = x => x * x;
无参数时需写空括号：
const sayHi = () => ‘Hello’;
2. this指向不同
这是两者最核心的区别。传统函数有自己的this上下文，而箭头函数没有自己的this，它会继承外层作用域的this值。
示例：对象方法中使用
const user = {
name: ‘Alice’,
age: 25,
grow: function() {
即构数智人
即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。
36 查看详情 
setInterval(function() {
console.log(this.age); // undefined
}, 1000);
}
};
上述代码中，setInterval内的function有独立的this，指向window或undefined（严格模式），导致无法访问user.age。
改用箭头函数：
const user = {
name: ‘Alice’,
age: 25,
grow: function() {
setInterval(() => {
console.log(this.age); // 25
}, 1000);
}
};
箭头函数捕获的是grow方法执行时的this，即user对象，因此能正确访问age。
3. 不绑定arguments对象
传统函数内部可以使用arguments获取所有传入参数，而箭头函数没有arguments。
传统函数：
function logArgs() {
console.log(arguments[0]); // 输出第一个参数
}
箭头函数：
const logArgs = () => {
console.log(arguments); // ReferenceError
};
如果需要类数组参数，可用剩余参数代替：
const logArgs = (…args) => {
console.log(args[0]);
};
4. 不能作为构造函数
箭头函数不能用new调用，因为它没有prototype属性，也不绑定this。
const Person = (name) => this.name = name;
const p = new Person(‘Bob’); // TypeError
传统函数可以正常构造实例。
5. 没有原型和constructor
箭头函数不存在prototype属性，也不能定义constructor。
const fn1 = () => {};
console.log(fn1.prototype); // undefined
传统函数则具备完整的原型链支持。
基本上就这些关键区别。箭头函数适合用于简化回调、保持this上下文一致的场景；传统函数更适合定义对象方法、构造函数等需要独立this或arguments的地方。合理选择，才能发挥各自优势。
以上就是ES6箭头函数与传统函数区别详解_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/309399.html
微信扫一扫 
支付宝扫一扫 
