网站
引入
箭头函数是 ES6 新增的一种更简洁的函数写法，特别适合写回调函数和简短的函数表达式。相比传统函数，箭头函数语法更短，而且不会绑定自己的 this。
定义
定义
箭头函数是一种用
=>符号定义的函数，写法比传统function更简洁，常用于回调函数和函数表达式。
语法
基础写法
const add = (a, b) => {
return a + b;
};
console.log(add(1, 2)); // 3简写形式
如果函数体只有一条返回语句，可以省略 {} 和 return：
const add = (a, b) => a + b;
console.log(add(1, 2)); // 3单个参数
如果只有一个参数，可以省略参数外面的 ()：
const double = n => n * 2;
console.log(double(5)); // 10无参数
如果没有参数，必须保留空括号 ()：
const sayHello = () => {
console.log("你好");
};
sayHello();例子
示例 1：数组遍历
传统写法：
const list = [1, 2, 3, 4, 5];
const result = list.map(function (n) {
return n * 2;
});
console.log(result); // [2, 4, 6, 8, 10]箭头函数写法：
const list = [1, 2, 3, 4, 5];
const result = list.map(n => n * 2);
console.log(result); // [2, 4, 6, 8, 10]示例 2：事件监听
<button id="btn">点击</button>const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
console.log("按钮被点击了");
});示例 3：延时执行
setTimeout(() => {
console.log("3 秒后执行");
}, 3000);示例 4：返回对象
如果箭头函数直接返回对象，需要用 () 包裹对象字面量，避免被当成函数体：
const getUser = () => ({
name: "Tom",
age: 18
});
console.log(getUser()); // { name: "Tom", age: 18 }常见写法
| 写法 | 说明 |
|---|---|
(a, b) => { return a + b; } | 完整写法，有 {} 和 return |
(a, b) => a + b | 简写，省略 {} 和 return |
n => n * 2 | 单个参数，省略 () |
() => console.log("hi") | 无参数，保留 () |
() => ({ name: "Tom" }) | 返回对象，需要用 () 包裹 |
特点
- 写法更简洁：适合写短小的回调函数
- 不绑定
this：箭头函数没有自己的this，它会继承外层作用域的this - 不能作为构造函数：不能用
new调用箭头函数 - 没有
arguments对象：箭头函数内部不能使用arguments - 不能用作生成器函数：不能使用
yield关键字
this 的区别
传统函数
传统函数的 this 取决于谁调用它：
const obj = {
name: "Tom",
sayHello: function () {
console.log(this.name);
}
};
obj.sayHello(); // "Tom"
const fn = obj.sayHello;
fn(); // undefined，因为 this 指向全局对象箭头函数
箭头函数的 this 继承自外层作用域，不会改变：
const obj = {
name: "Tom",
sayHello: () => {
console.log(this.name);
}
};
obj.sayHello(); // undefined，this 不是 obj，而是外层作用域实际应用场景
在定时器或事件回调中，箭头函数可以避免 this 指向问题：
const user = {
name: "Tom",
sayHello: function () {
setTimeout(() => {
console.log(this.name); // "Tom"，this 继承自 sayHello
}, 1000);
}
};
user.sayHello();如果用传统函数，需要提前保存 this：
const user = {
name: "Tom",
sayHello: function () {
const self = this;
setTimeout(function () {
console.log(self.name); // "Tom"
}, 1000);
}
};
user.sayHello();注意事项
- 箭头函数不适合用作对象方法，因为它不会绑定
this - 如果函数体只有一条语句，可以省略
{}，但要注意返回对象时需要用()包裹 - 箭头函数不能用
new调用，会报错 - 如果需要使用
this或arguments，应该用传统函数
理解
箭头函数可以理解为”更轻量的函数”，它去掉了传统函数的一些特性（比如 this、arguments），换来了更简洁的写法。
箭头函数最大的特点是不绑定 this，它的 this 是继承来的，不会因为调用方式改变。这让它特别适合写回调函数，不用担心 this 指向问题。
日常开发中，回调函数优先用箭头函数，对象方法优先用传统函数。
引出
理解了箭头函数之后，可以继续学习 JS this，深入理解 this 在不同场景下的指向规律。
也可以结合 JS 数组方法 学习如何用箭头函数简化数组操作。