JavaScript 箭头函数基础知识

箭头函数（Arrow Functions）是ES6（ECMAScript 2015）引入的一种新的函数语法，它提供了一种更简洁的函数书写方式，并且在某些行为上与传统的函数表达式有所不同。

基本语法

箭头函数的基本语法：

// 传统函数表达式
const func1 = function(param) {
  return param * 2;
};

// 箭头函数
const func2 = (param) => {
  return param * 2;
};

简化写法

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

const square = x => {
  return x * x;
};

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

const square = x => x * x;

3. 无参数时需要空括号：

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

箭头函数的特点

1. **没有自己的this**：箭头函数不会创建自己的this，它会从自己的作用域链的上一层继承this。

const obj = {
  name: 'Alice',
  regularFunc: function() {
    console.log(this.name); // Alice
  },
  arrowFunc: () => {
    console.log(this.name); // undefined (或 window.name 在浏览器中)
  }
};

2. 不能用作构造函数：箭头函数不能使用new关键字调用。

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

3. 没有arguments对象：箭头函数没有自己的arguments对象，但可以访问外围函数的arguments。

function outer() {
  const inner = () => {
    console.log(arguments); // 访问outer的arguments
  };
  inner();
}
outer(1, 2, 3); // 输出 [1, 2, 3]

4. 没有prototype属性：

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

适用场景

箭头函数非常适合用在需要简短函数的地方，特别是回调函数：

// 数组方法
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

// 定时器
setTimeout(() => {
  console.log('1 second later');
}, 1000);

不适用场景

1. 对象方法：由于this的绑定问题，箭头函数不适合作为对象的方法。
2. 需要动态上下文的函数：如事件处理函数（除非你确实想要使用外层this）。
3. 需要使用arguments对象的函数。

总结

箭头函数提供了更简洁的语法和词法this绑定，使得代码更加简洁明了。但在使用时需要注意它的特性，避免在不适合的场景中使用。