五、箭头函数

箭头函数（Arrow Functions）是 ES6 引入的一种新的函数声明方式，它提供了更简洁的语法，并且改变了 this 的绑定规则。

箭头函数基本语法

基本形式

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

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

console.log(add(1, 2)); // 3

简写规则

1. 单参数可省略括号

// 传统函数
function greet(name) {
  return `Hello, ${name}!`;
}

// 箭头函数
const greet = name => {
  return `Hello, ${name}!`;
};

console.log(greet('John')); // Hello, John!

2. 单语句可省略括号和 return

// 传统函数
function square(x) {
  return x * x;
}

// 箭头函数
const square = x => x * x;

console.log(square(5)); // 25

3. 多参数需要括号

const multiply = (a, b, c) => a * b * c;
console.log(multiply(2, 3, 4)); // 24

4. 返回对象需要括号

// 错误写法
// const createPerson = (name, age) => { name, age };

// 正确写法
const createPerson = (name, age) => ({ name, age });
console.log(createPerson('John', 30)); // { name: 'John', age: 30 }

箭头函数的 this 指向

传统函数的 this 指向

传统函数的 this 指向取决于函数的调用方式：

const obj = {
  name: 'John',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.greet(); // Hello, John! - this 指向 obj

const greet = obj.greet;
greet(); // Hello, undefined! - this 指向全局对象

箭头函数的 this 指向

箭头函数的 this 指向是静态的，它继承自外层作用域的 this：

const obj = {
  name: 'John',
  greet: function() {
    // 箭头函数继承 greet 方法的 this 指向
    const sayHello = () => {
      console.log(`Hello, ${this.name}!`);
    };
    sayHello();
  }
};

obj.greet(); // Hello, John! - this 指向 obj

const greet = obj.greet;
greet(); // Hello, undefined! - this 指向全局对象

箭头函数的 this 绑定

function Person() {
  this.age = 0;
  
  // 传统函数
  setTimeout(function() {
    console.log(this.age); // undefined - this 指向全局对象
  }, 1000);
  
  // 箭头函数
  setTimeout(() => {
    console.log(this.age); // 0 - this 指向 Person 实例
  }, 1000);
}

new Person();

箭头函数不能做什么？

1. 不能当构造函数

// 错误写法
const Person = (name, age) => {
  this.name = name;
  this.age = age;
};

// const john = new Person('John', 30); // 报错：Person is not a constructor

2. 没有 arguments 对象

// 传统函数
function sum() {
  return Array.from(arguments).reduce((acc, curr) => acc + curr, 0);
}

// 箭头函数
const sum = (...args) => {
  return args.reduce((acc, curr) => acc + curr, 0);
};

console.log(sum(1, 2, 3)); // 6

3. 没有 prototype 属性

const add = (a, b) => a + b;
console.log(add.prototype); // undefined

实战：数组方法中简化代码

const numbers = [1, 2, 3, 4, 5];

// 传统函数
const doubled = numbers.map(function(num) {
  return num * 2;
});

// 箭头函数
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

// 筛选偶数
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4]

// 计算总和
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15

普通函数 vs 箭头函数 总结

特性	普通函数	箭头函数
语法	function() {}	() => {}
this 指向	动态，取决于调用方式	静态，继承自外层作用域
构造函数	可以作为构造函数	不能作为构造函数
arguments	有 arguments 对象	没有 arguments 对象
prototype	有 prototype 属性	没有 prototype 属性
适用场景	方法、构造函数	回调函数、简短函数

箭头函数的优势

1. 代码简洁：减少了函数声明的冗余代码
2. this 绑定明确：避免了传统函数中 this 指向混乱的问题
3. 可读性高：简洁的语法使代码更易读
4. 适合回调：特别适合作为数组方法和 Promise 的回调函数

通过本章节的学习，你已经掌握了箭头函数的基本语法和特点。箭头函数是 ES6 中非常实用的语法特性，可以大大简化代码，提高开发效率。