ES6中的arrow functions（箭头函数）有何特点？与普通函数有何不同？

ES6中的arrow functions（箭头函数）是函数的一种简写形式，它们提供了一种更简洁、更直观的方式来定义函数。箭头函数与普通函数相比，具有以下几个主要特点和不同之处：

文末有我帮助400多位同学成功领取到前端offer的场景题哦

1. 更简洁的语法：

   1. 箭头函数省略了function关键字，使得函数定义更加简洁。
   2. 如果函数体只有一条语句，可以省略大括号{}，并自动返回该语句的结果（隐式返回）。
   3. 如果函数没有参数或参数只有一个，可以省略小括号()。

   示例：

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

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

// 只有一个参数的箭头函数
const square = x => x * x;

// 没有参数的箭头函数
const greet = () => console.log('Hello!');

1. 不绑定自己的**this**：

   1. 箭头函数不绑定自己的this，它会捕获其所在上下文的this值，作为自己的this值。在普通函数中，this的值取决于函数的调用方式（如作为对象方法调用、作为函数调用、作为构造函数调用等）。

   示例：

const obj = {
  value: 1,
  getValue: function() {
    // 普通函数，this指向obj
    console.log(this.value); // 输出 1
    setTimeout(function() {
      // 普通函数在setTimeout回调中，this指向window（非严格模式下）或undefined（严格模式下）
      console.log(this.value); // 输出 undefined（非严格模式下）或报错（严格模式下）
    }, 0);
    setTimeout(() => {
      // 箭头函数，this继承自外层函数（这里是getValue方法）的this，指向obj
      console.log(this.value); // 输出 1
    }, 0);
  }
};
obj.getValue();

1. 没有**arguments**对象：

   1. 箭头函数没有自己的arguments对象。如果需要访问传递给函数的参数列表，可以使用剩余参数（rest parameters）。

   示例：

const sum = (...args) => args.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 输出 10

1. 不能用作构造函数：

   1. 箭头函数没有prototype属性，因此它们不能用作构造函数，不能使用new关键字来调用。

2. 没有**super**、**new.target**和**this.arguments**：

   1. 箭头函数没有这些特殊的绑定，因为它们不绑定自己的this，也没有自己的prototype。

3. 不能改变**this**的绑定：

   1. 箭头函数中的this值在函数创建时就已经被确定，并且不能通过call()、apply()或bind()等方法来改变。

箭头函数通常用于那些不需要自己this绑定的场合，特别是在回调函数和事件处理器中，可以避免很多与this相关的常见问题。然而，在某些需要明确绑定this值或者需要用到arguments对象的场合，仍然需要使用普通函数。
堪称2024最强的前端面试场景题，让421人成功拿到offer