箭头函数与原型方法

箭头函数的基本语法

箭头函数是ES6引入的一种简洁的函数表达式写法。基本语法如下：

const func = (param1, param2) => {
  // 函数体
  return result;
};

当只有一个参数时，可以省略括号：

const square = x => x * x;

当函数体只有一条返回语句时，可以省略大括号和return关键字：

const double = num => num * 2;

箭头函数与传统函数的区别

箭头函数与传统函数有几个关键区别：

1. this绑定：箭头函数没有自己的this，它会捕获所在上下文的this值
2. 不能用作构造函数：箭头函数不能使用new关键字调用
3. 没有arguments对象：箭头函数中没有arguments对象，但可以使用剩余参数(...args)
4. 没有prototype属性：箭头函数没有prototype属性

function Person() {
  this.age = 0;

  // 传统函数
  setInterval(function growUp() {
    this.age++; // 这里的this是全局对象或undefined
  }, 1000);

  // 箭头函数
  setInterval(() => {
    this.age++; // 这里的this是Person实例
  }, 1000);
}

箭头函数与原型方法

在原型方法中使用箭头函数需要特别注意this绑定问题：

function Person(name) {
  this.name = name;
}

// 传统方法 - this动态绑定
Person.prototype.sayName = function() {
  console.log(this.name);
};

// 箭头函数 - this静态绑定
Person.prototype.sayNameArrow = () => {
  console.log(this.name); // 这里的this是定义时的上下文，不是Person实例
};

const person = new Person('Alice');
person.sayName(); // 输出 "Alice"
person.sayNameArrow(); // 输出 undefined 或全局对象的name属性

箭头函数在回调中的优势

箭头函数特别适合用在回调函数中，可以避免this绑定的问题：

class Counter {
  constructor() {
    this.count = 0;
  }
  
  start() {
    // 传统函数需要绑定this
    setInterval(function() {
      this.count++;
      console.log(this.count);
    }.bind(this), 1000);
    
    // 箭头函数自动绑定this
    setInterval(() => {
      this.count++;
      console.log(this.count);
    }, 1000);
  }
}

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

虽然箭头函数很简洁，但有些场景不适合使用：

1. 对象方法：当需要访问对象实例时
2. 原型方法：同上
3. 需要动态this的函数：如事件处理函数
4. 需要arguments对象的函数

const obj = {
  value: 42,
  
  // 传统方法
  print: function() {
    console.log(this.value);
  },
  
  // 箭头函数 - 不会按预期工作
  printArrow: () => {
    console.log(this.value); // 这里的this不是obj
  }
};

obj.print(); // 42
obj.printArrow(); // undefined

箭头函数与高阶函数

箭头函数与高阶函数结合使用时非常简洁：

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

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

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

// 更复杂的例子
const operations = [
  { type: 'add', value: 5 },
  { type: 'multiply', value: 2 }
];

const result = operations.reduce((acc, op) => {
  if (op.type === 'add') return acc + op.value;
  if (op.type === 'multiply') return acc * op.value;
  return acc;
}, 10); // 初始值为10

箭头函数与类字段

在ES6类中，可以使用箭头函数作为类字段来绑定this：

class Timer {
  constructor() {
    this.seconds = 0;
  }
  
  // 传统方法需要手动绑定
  start() {
    setInterval(this.tick.bind(this), 1000);
  }
  
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
  
  // 使用箭头函数自动绑定
  startArrow = () => {
    setInterval(this.tickArrow, 1000);
  }
  
  tickArrow = () => {
    this.seconds++;
    console.log(this.seconds);
  }
}

箭头函数的性能考虑

虽然箭头函数很简洁，但在某些情况下可能会有性能影响：

1. 内存使用：箭头函数作为类字段时，每个实例都会有函数副本
2. 调试：箭头函数没有函数名，调试时可能不太方便
3. 递归：箭头函数不能通过函数名递归调用

// 传统函数可以命名并递归
function factorial(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
}

// 箭头函数需要赋值给变量才能递归
const factorialArrow = n => n <= 1 ? 1 : n * factorialArrow(n - 1);

箭头函数与生成器

箭头函数不能用作生成器函数，必须使用function*语法：

// 正确
function* generator() {
  yield 1;
  yield 2;
}

// 错误
const generatorArrow = *() => {
  yield 1;
  yield 2;
};

箭头函数的嵌套使用

箭头函数可以嵌套使用，但要注意可读性：

const createAdder = base => value => base + value;

const add5 = createAdder(5);
console.log(add5(3)); // 8

// 更复杂的嵌套
const processData = config => data => 
  data.filter(item => item.active)
      .map(item => ({
        ...item,
        value: item.value * config.multiplier
      }));