JS 箭头函数

在 JavaScript 中，箭头函数是一种简洁的函数表达式语法。相比传统的函数声明，箭头函数不仅简化了代码，还在 this 的绑定上表现出独特的特性。以下是箭头函数的基本用法及其常见应用场景。

一、基本语法

箭头函数的基本语法为：

(参数) => { 函数体 }

如果函数体只有一条表达式，可以省略花括号和 return 关键字，直接返回该表达式的值。

例如：

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const addArrow = (a, b) => a + b;

二、参数处理

1. 单个参数时可以省略括号：

const square = x => x * x;

2. 没有参数时，需要使用空括号：

const sayHello = () => console.log('Hello!');

三、函数体

当函数体有多条语句时，需要使用花括号并明确使用 return 关键字：

const multiplyAndLog = (a, b) => {
  const result = a * b;
  console.log(result);
  return result;
};

四、`this` 绑定

箭头函数没有自己的 this、arguments、super 或 new.target。箭头函数中的 this 是在定义时确定的，而不是调用时确定的。这使得在回调函数中使用 this 时不会出现指向错误的问题。

例如：

const obj = {
  name: 'John',
  sayName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};

obj.sayName(); // 输出 'John'，因为箭头函数中的 this 指向外部的 obj 对象。

五、适用场景

1. 作为回调函数

在数组方法中：

箭头函数可以使 map、filter、reduce 等数组方法的代码更加简洁。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(num => num * 2);
// doubledNumbers 为 [2, 4, 6, 8, 10]

使用 filter 方法筛选出符合条件的元素。

const evenNumbers = numbers.filter(num => num % 2 === 0);
// evenNumbers 为 [2, 4]

在事件处理中：

当为 DOM 元素添加事件监听器时，箭头函数可以避免 this 指向错误。

<button id="myButton">Click me</button>
<script>
  document.getElementById('myButton').addEventListener('click', () => {
    console.log(this); 
    // 这里的 this 指向 window 对象，而不是按钮元素本身。如果使用传统函数，this 的指向会根据调用方式变化，容易混淆。
  });
</script>

2. 简洁的函数定义

当函数体比较简单，只有一条表达式时，箭头函数可以让代码更加紧凑。

const square = num => num * num;

3. 对象方法中的函数表达式

在对象中定义方法时，如果方法内部不依赖 this，可以使用箭头函数。但需要注意的是，箭头函数的 this 绑定到外部作用域。

const person = {
  name: 'Alice',
  greet: () => console.log(`Hello, I'm ${this.name}`) 
  // 这里的 this 指向外部作用域，而不是 person 对象。要访问 person.name，应该使用传统函数。
};

4. 立即执行函数表达式（IIFE）

箭头函数可以用于创建立即执行的函数表达式，尤其是在需要传递参数时更加简洁。

(() => console.log('This is an immediately invoked arrow function.'))();

六、箭头函数的特点

没有 this 绑定：箭头函数不会绑定自己的 this，它会从定义它的作用域中继承 this。
不能作为构造函数：由于箭头函数没有 this，所以不能使用 new 关键字实例化对象。
没有 arguments 对象：箭头函数没有自己的 arguments，如果需要使用参数，可以使用 rest 参数 ...args 来代替。
不可使用 yield：箭头函数不能作为生成器函数，不能使用 yield 关键字。