JavaScript 箭头函数

JavaScript 中的箭头函数 (Arrow Functions) 是一种简洁的函数定义语法，引入自 ECMAScript 6（ES6）。它可以让代码更简洁，同时也改变了传统函数的一些行为。

---

基本语法

箭头函数的语法是：

(param1, param2, ..., paramN) => { 
  // 函数体
}

示例：

// 普通函数
function add(a, b) {
    return a + b;
}

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

console.log(add(2, 3)); // 输出: 5

单个参数时的简化：

// 单个参数时可以省略括号
const square = x => x * x;

console.log(square(4)); // 输出: 16

无参数时：

// 必须加上括号
const greet = () => 'Hello';

console.log(greet()); // 输出: Hello

多行函数体时：

const multiply = (a, b) => {
    const result = a * b;
    return result;
};

console.log(multiply(3, 4)); // 输出: 12

---

与普通函数的区别

1. this 的绑定

箭头函数不会创建自己的 this，它的 this 始终由外部作用域决定。

示例：

function Person() {
    this.age = 0;

    setInterval(function() {
        this.age++;
        console.log(this.age); // `this` 指向全局对象 (或 `undefined` 严格模式下)
    }, 1000);
}

new Person();

使用箭头函数后：

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age); // `this` 指向外部作用域，即 `Person` 实例
    }, 1000);
}

new Person();

2. 不能用作构造函数

箭头函数不能作为构造函数，使用 new 调用会抛出错误。

const Person = (name) => {
    this.name = name;
};

// new Person('Alice'); // 会报错：箭头函数不能作为构造函数

3. 没有 arguments 对象

箭头函数没有自己的 arguments，可以通过 rest 参数代替：

function normalFunction() {
    console.log(arguments); // 类数组对象
}

const arrowFunction = (...args) => {
    console.log(args); // 使用 rest 参数
};

normalFunction(1, 2, 3); // 输出: [Arguments] { '0': 1, '1': 2, '2': 3 }
arrowFunction(1, 2, 3); // 输出: [1, 2, 3]

---

使用场景与注意事项

1. 适用于回调函数 箭头函数特别适合用于回调函数，避免 this 的混淆：

   const numbers = [1, 2, 3];
   const doubled = numbers.map(n => n * 2);
   console.log(doubled); // 输出: [2, 4, 6]
   

2. 避免过度简写 如果函数体过长，尽量避免一行简写，保证可读性。

3. 不适用动态上下文场景 如果需要动态绑定 this，请使用普通函数。

---

总结

箭头函数的主要优点是语法简洁，并解决了普通函数 this 的混淆问题。但由于其局限性（如没有 this、arguments 和不能用作构造函数），需要根据具体需求选择使用。