JS箭头函数是ES6引入的新型函数定义语法，它和传统函数在语法结构、this指向规则等多个方面存在明显差异，理解这些差异能帮助开发者更合理地选择函数类型，避免开发中出现逻辑错误。
语法差异对比
箭头函数的语法比传统函数更简洁，在不同参数和函数体场景下有不同的简写形式，和传统函数的定义方式区别明显。
传统函数定义方式
传统函数可以通过函数声明或者函数表达式两种方式定义，语法相对固定。
// 函数声明
function add(a, b) {
return a + b;
}
// 函数表达式
const multiply = function(a, b) {
return a * b;
};
箭头函数定义方式
箭头函数使用=>符号定义，根据参数数量和函数体内容有不同的简写规则。
// 单个参数，函数体只有一行返回语句，可省略括号和return
const square = x => x * x;
// 多个参数，需要括号包裹
const add = (a, b) => a + b;
// 函数体有多行语句，需要大括号包裹，返回需要显式写return
const calculate = (a, b) => {
const sum = a + b;
return sum * 2;
};
// 无参数场景
const sayHello = () => console.log('hello');
this绑定规则差异
this绑定是箭头函数和传统函数最核心的区别，两者的this指向逻辑完全不同。
传统函数的this绑定
传统函数的this指向是在函数调用时确定的，遵循不同的调用场景规则：作为对象方法调用时指向所属对象，普通调用时指向全局对象（严格模式下为undefined），使用call、apply、bind时可手动指定this。
const obj = {
name: 'test',
// 传统函数作为对象方法
getName: function() {
return this.name;
}
};
console.log(obj.getName()); // 输出test，this指向obj
const getNameFn = obj.getName;
console.log(getNameFn()); // 非严格模式下输出undefined（全局没有name属性），this指向全局对象
箭头函数的this绑定
箭头函数没有自己的this，它的this是在定义时继承自外层作用域的this，且后续无法被call、apply、bind修改。
const obj = {
name: 'test',
// 箭头函数作为对象方法
getName: () => {
return this.name;
}
};
// 箭头函数的this继承自定义时的外层作用域，这里外层是全局作用域，this指向全局对象
console.log(obj.getName()); // 非严格模式下输出undefined（全局没有name属性）
// 尝试用bind修改箭头函数的this，无效
const boundFn = obj.getName.bind({name: 'newTest'});
console.log(boundFn()); // 仍然输出undefined
其他特性差异
除了语法和this绑定，两者还有其他几个重要的特性区别，具体对比如下：
| 特性 | 传统函数 | 箭头函数 |
|---|---|---|
| arguments对象 | 有自己的arguments对象，可获取所有传入参数 | 没有自己的arguments对象，可通过剩余参数获取参数 |
| 构造函数能力 | 可以用new关键字调用，作为构造函数创建实例 | 不能用new调用，会抛出错误 |
| prototype属性 | 有prototype属性 | 没有prototype属性 |
arguments对象差异示例
// 传统函数获取参数
function traditionalFn() {
console.log(arguments); // 输出Arguments对象，包含所有传入参数
}
traditionalFn(1, 2, 3);
// 箭头函数获取参数，使用剩余参数
const arrowFn = (...args) => {
console.log(args); // 输出数组[1,2,3]
};
arrowFn(1, 2, 3);
构造函数能力差异示例
// 传统函数作为构造函数
function Person(name) {
this.name = name;
}
const p1 = new Person('张三');
console.log(p1.name); // 输出张三
// 箭头函数作为构造函数，会报错
const Person2 = (name) => {
this.name = name;
};
// const p2 = new Person2('李四'); // 执行该行会抛出TypeError错误
适用场景建议
根据两者的特性差异，可以总结出合适的适用场景：
- 需要动态this绑定的场景，比如对象的方法、事件回调函数（需要指向触发事件的元素），优先使用传统函数
- 不需要自己的this，需要继承外层this的场景，比如定时器回调、数组方法的回调，优先使用箭头函数
- 需要作为构造函数创建实例的场景，必须使用传统函数
- 需要获取arguments对象的场景，使用传统函数，或者箭头函数配合剩余参数实现
注意：不要在对象的方法中随意使用箭头函数，除非你明确需要继承外层的this，否则很容易出现this指向不符合预期的问题。