JavaScript 箭头函数入门：语法与 this 指向

更短的函数写法

ES6 引入的箭头函数（=>）让我们用更短的语法写函数。同样是"把数字加一"：

// 普通函数
function addOne(n) {
  return n + 1;
}

// 箭头函数
const addOne2 = (n) => {
  return n + 1;
};

// 只有一句 return 时，还能再短
const addOne3 = n => n + 1;

console.log(addOne3(2));  // 输出：3

只有一个参数时括号可以省，函数体只有一句时大括号和 return 都能省。回调里最常见这种单行写法：

const nums = [3, 1, 4, 1, 5];
const doubled = nums.map(n => n * 2);
console.log(doubled);  // 输出：[6, 2, 8, 2, 10]

多参数与无参数

参数不止一个时括号必须写；没有参数时写一对空括号：

const add = (a, b) => a + b;
console.log(add(2, 3));  // 输出：5

const sayHi = () => console.log("嗨！");
sayHi();  // 输出：嗨！

返回对象的小坑

想直接返回一个对象字面量，外层必须包一层圆括号，否则大括号会被当成函数体而不是对象：

const makeUser = (name, age) => ({ name, age });

console.log(makeUser("小雪", 20));
// 输出：{ name: '小雪', age: 20 }

最大的区别：没有自己的 this

普通函数的 this 由"谁调用"决定，箭头函数没有自己的 this，直接用外层的 this。这一点在回调理特别有用：

const counter = {
  count: 0,
  start() {
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
};

counter.start();
// 每秒输出：1、2、3…… this 一直指向 counter

如果把这里的箭头函数换成普通 function，this 就不再指向 counter，count 的自增会出问题。反过来，定义对象方法时也不适合用箭头函数，因为方法里的 this 会指向外层而不是对象本身。

不能用的场合

箭头函数有几个限制要记住：不能当构造函数（不能 new）、没有自己的 arguments 对象、不适合做对象方法和原型方法。把它当"短小的回调工具"来用，基本不会出错。

与普通函数如何选择

日常给 map、filter 这类方法传回调，箭头函数几乎是默认选择；而对象的方法、需要用 this 的场景，继续用普通函数。判断标准很简单：需不需要自己的 this，逻辑是不是单行。

小结

箭头函数的核心就两点：写法更短，适合单行回调；没有自己的 this，会沿用外层作用域。日常给 map、filter、setTimeout 这类 API 传回调时优先用它；对象方法和需要独立 this 的场景继续用普通函数，两者搭配着用最舒服。