Javascript的箭头函数是ES6标准中新增的函数定义语法，它用更简洁的写法替代了部分传统函数表达式的使用场景，同时在this绑定等核心特性上和传统函数有本质区别，是前端开发中高频使用的语法特性。
箭头函数的基本语法
箭头函数的基础写法是用箭头=>连接参数列表和函数体，根据参数数量和函数体复杂度的不同，有多种简化写法。
无参数场景
当函数不需要接收参数时，参数部分用空括号表示，函数体如果是单条表达式可以省略大括号和return关键字。
// 无参数，返回固定值
const getNum = () => 100;
// 等价于传统函数
function getNumTraditional() {
return 100;
}
console.log(getNum()); // 输出100
单个参数场景
当函数只有一个参数时，参数外的括号可以省略。
// 单个参数，返回参数加1的结果
const addOne = num => num + 1;
// 等价于传统函数
function addOneTraditional(num) {
return num + 1;
}
console.log(addOne(5)); // 输出6
多个参数场景
当函数有多个参数时，参数需要用括号包裹，用逗号分隔。
// 两个参数，返回两数之和
const sum = (a, b) => a + b;
// 等价于传统函数
function sumTraditional(a, b) {
return a + b;
}
console.log(sum(3, 4)); // 输出7
函数体为多行语句场景
如果函数体包含多条语句，需要用大括号包裹函数体，并且需要显式使用return返回结果。
// 多行函数体，判断数值是否为正数
const isPositive = num => {
if (num > 0) {
return true;
} else {
return false;
}
};
// 等价于传统函数
function isPositiveTraditional(num) {
if (num > 0) {
return true;
} else {
return false;
}
}
console.log(isPositive(2)); // 输出true
console.log(isPositive(-1)); // 输出false
返回对象字面量场景
如果箭头函数需要直接返回对象字面量，需要用括号把对象包裹起来，避免大括号被解析为函数体边界。
// 返回对象字面量
const createUser = (name, age) => ({ name: name, age: age });
// 等价于传统函数
function createUserTraditional(name, age) {
return { name: name, age: age };
}
console.log(createUser('张三', 20)); // 输出{ name: '张三', age: 20 }
箭头函数的核心特性
没有自己的this绑定
这是箭头函数和传统函数最核心的区别。传统函数的this指向是在调用时动态确定的，而箭头函数本身没有this值，它的this继承自外层作用域的this，且一旦确定就不会再改变。
// 传统函数的this指向问题
const obj1 = {
name: '对象1',
printName: function() {
setTimeout(function() {
console.log(this.name); // this指向window，输出undefined
}, 100);
}
};
obj1.printName();
// 箭头函数解决this指向问题
const obj2 = {
name: '对象2',
printName: function() {
setTimeout(() => {
console.log(this.name); // this继承printName的this，指向obj2，输出对象2
}, 100);
}
};
obj2.printName();
没有arguments对象
传统函数内部可以通过arguments对象获取所有传入的参数，而箭头函数没有自己的arguments对象，如果需要获取不定参数，可以使用ES6的rest参数语法。
// 传统函数使用arguments
function traditionalFn() {
console.log(arguments); // 输出Arguments对象，包含所有传入参数
}
traditionalFn(1, 2, 3);
// 箭头函数使用rest参数
const arrowFn = (...args) => {
console.log(args); // 输出数组[1,2,3]
};
arrowFn(1, 2, 3);
不能作为构造函数使用
传统函数可以通过new关键字调用作为构造函数创建实例，而箭头函数没有[[Construct]]内部方法，不能被new调用，否则会抛出错误。
// 传统函数作为构造函数
function Person(name) {
this.name = name;
}
const p1 = new Person('李四');
console.log(p1.name); // 输出李四
// 箭头函数作为构造函数会报错
const PersonArrow = (name) => {
this.name = name;
};
// const p2 = new PersonArrow('王五'); // 执行这行会抛出TypeError错误
没有prototype属性
因为箭头函数不能作为构造函数，所以它也没有prototype属性，访问时会返回undefined。
function traditionalFn() {}
console.log(traditionalFn.prototype); // 输出对象
const arrowFn = () => {};
console.log(arrowFn.prototype); // 输出undefined
箭头函数的适用场景
- 需要简洁写法的回调函数场景，比如数组的map、filter、forEach等方法中的回调，用箭头函数可以减少代码量。
- 需要固定this指向的场景，比如在对象方法内部的定时器、事件回调中，使用箭头函数可以避免this指向丢失的问题。
- 不需要使用arguments对象、不需要作为构造函数的简单函数场景。
箭头函数的不适用场景
- 需要定义对象方法的时候，因为箭头函数的this不会指向对象本身，会导致方法无法正确访问对象的属性。
- 需要使用arguments对象获取所有参数的场景，箭头函数没有自身的arguments，需要改用rest参数。
- 需要作为构造函数创建实例的场景，箭头函数不能被new调用。
- 需要使用call、apply、bind方法改变this指向的场景，箭头函数的this是继承外层的，这些方法无法修改它的this值。
总结
箭头函数是Javascript中非常实用的语法特性，它的简洁写法和固定的this绑定特性解决了很多传统函数的痛点，但它并不是传统函数的完全替代品，需要根据具体的使用场景选择是否使用。掌握箭头函数的语法规则、核心特性以及适用边界，才能在开发中合理运用它，写出更健壮的代码。
箭头函数javascriptES6函数表达式修改时间：2026-07-02 22:24:30