箭头函数的基本语法

箭头函数的基本语法

箭头函数是ECMAScript 6引入的一种简化函数定义的方式。它使用=>符号来定义函数，相比传统函数表达式更简洁。箭头函数不仅简化了代码，还改变了this的绑定行为。

// 传统函数表达式
const add = function(a, b) {
  return a + b;
};

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

基本语法结构

箭头函数的基本语法由参数列表、箭头符号和函数体组成。根据参数和函数体的不同，语法会有几种变体：

1. 单一参数时，可以省略括号

const square = x => x * x;

2. 无参数或多个参数时，必须使用括号

const greet = () => console.log('Hello');
const sum = (a, b, c) => a + b + c;

3. 函数体只有一条语句时，可以省略大括号和return

const double = x => x * 2;

4. 函数体有多条语句时，需要使用大括号和return

const calculate = (a, b) => {
  const sum = a + b;
  const product = a * b;
  return sum + product;
};

返回对象字面量

当箭头函数返回对象字面量时，需要用括号包裹对象，以避免与函数体的大括号冲突：

// 错误写法
const createUser = (id, name) => { id: id, name: name };

// 正确写法
const createUser = (id, name) => ({ id: id, name: name });

this的绑定行为

箭头函数最显著的特点是它不绑定自己的this，而是继承自外层函数作用域：

function Timer() {
  this.seconds = 0;
  
  // 传统函数表达式
  setInterval(function() {
    this.seconds++;  // 这里的this指向window/undefined
  }, 1000);
  
  // 箭头函数
  setInterval(() => {
    this.seconds++;  // 这里的this正确指向Timer实例
  }, 1000);
}

不适合使用箭头函数的场景

虽然箭头函数很简洁，但并非所有情况都适用：

1. 作为对象方法时，箭头函数不会绑定对象作为this

const person = {
  name: 'Alice',
  greet: () => console.log(`Hello, ${this.name}`)  // this不会指向person
};

2. 需要动态this的场景，如DOM事件处理

button.addEventListener('click', () => {
  console.log(this);  // 这里的this不会指向button元素
});

3. 需要arguments对象的函数

const showArgs = () => console.log(arguments);  // 不会工作

箭头函数与高阶函数

箭头函数特别适合作为高阶函数的参数，使代码更简洁：

// 传统写法
const numbers = [1, 2, 3];
const doubled = numbers.map(function(n) {
  return n * 2;
});

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

嵌套箭头函数

箭头函数可以嵌套使用，这在函数式编程中很常见：

const add = a => b => a + b;
const add5 = add(5);
console.log(add5(3));  // 输出8

默认参数与剩余参数

箭头函数也支持ES6的默认参数和剩余参数：

// 默认参数
const greet = (name = 'Guest') => console.log(`Hello, ${name}`);

// 剩余参数
const sumAll = (...numbers) => numbers.reduce((sum, n) => sum + n, 0);

箭头函数与生成器

箭头函数不能用作生成器函数，不能使用yield关键字：

// 错误写法
const gen = *() => {
  yield 1;
  yield 2;
};

// 正确写法
function* gen() {
  yield 1;
  yield 2;
}

箭头函数的性能考虑

箭头函数通常比传统函数表达式更轻量，但在某些JavaScript引擎中，频繁创建箭头函数可能会导致轻微的性能开销。对于性能关键的代码，需要进行基准测试。

// 在循环中创建大量箭头函数可能不是最佳选择
for (let i = 0; i < 10000; i++) {
  setTimeout(() => console.log(i), 0);
}

箭头函数的其他限制

箭头函数还有一些其他限制需要注意：

1. 不能用作构造函数，使用new调用会抛出错误

const Foo = () => {};
new Foo();  // TypeError: Foo is not a constructor

2. 没有prototype属性

const bar = () => {};
console.log(bar.prototype);  // undefined

3. 不能用作Generator函数
4. 不能使用yield、super或new.target