JS中从常规函数到箭头函数的变革：精简语法，提升可读性

在ES6语法之前，JS中的函数由function、params参数和被花括号包裹的函数体组成。为了与后面说到的箭头函数相区别，我们先把这样的函数叫做常规函数，常规函数既可以用声明式写法也可以用赋值式写法。例子：

// 声明式写法
function sum(a, b) {
  return a + b;
}

// 赋值式写法
const sum = function(a, b) {
  return a + b;
};

2. 箭头函数的写法

ES6箭头函数的引入，使函数的写法变的更加精简和具有表现力。箭头函数的语法如下：

(params) => expression

其中，params是函数的参数列表，expression是函数的函数体，箭头（=>）将参数列表和函数体分隔开来。如果函数体只有一行代码，那么大括号和return关键字都是可以省略的。例如，上面的sum函数可以用箭头函数写成：

const sum = (a, b) => a + b;

3. this绑定的区别

在常规函数中，this关键字指向当前函数的调用者，而箭头函数中的this关键字始终指向定义该函数的上下文对象。这使得箭头函数在处理this绑定时具有独特性。

例如，我们有一个对象person，它有一个属性name和一个方法greet：

const person = {
  name: 'John Doe',
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

如果我们想在person对象外部调用greet方法，常规函数的this绑定就会失效，因为常规函数中的this关键字指向当前函数的调用者，而person对象并不是greet方法的调用者。为了解决这个问题，我们可以使用箭头函数：

const person = {
  name: 'John Doe',
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  }
};

由于箭头函数中的this关键字始终指向定义该函数的上下文对象，因此我们可以安全地在person对象外部调用greet方法，而this关键字仍然指向person对象。

4. 箭头函数的适用场景

箭头函数因其简洁的语法和独特的this绑定特性，在许多场景下都非常适用。以下是一些常见的场景：

• 回调函数：箭头函数非常适合作为回调函数，因为它们可以简化回调函数的写法，使代码更加可读和可维护。
• 事件监听器：箭头函数也很适合作为事件监听器，因为它们可以使事件监听器的写法更加简洁和直观。
• 数组操作：箭头函数可以方便地用于数组操作，例如使用map、filter和reduce等方法。
• 对象方法：箭头函数可以方便地用作对象的方法，因为它们可以简化对象方法的写法，使代码更加简洁和可读。

5. 箭头函数的局限性

虽然箭头函数非常有用，但它们也有一些局限性。以下是一些需要注意的方面：

• 箭头函数不能作为构造函数：箭头函数不能使用new关键字来创建对象，因此不能作为构造函数使用。
• 箭头函数没有自己的arguments对象：箭头函数没有自己的arguments对象，因此无法直接访问函数的参数。
• 箭头函数不能使用yield箭头函数不能使用yield关键字，因此不能用作生成器函数。

6. 结论

箭头函数是ES6中引入的一项重要的新特性，它可以使函数的写法更加简洁和具有表现力，同时也可以更好地处理this绑定。箭头函数在许多场景下都非常适用，但也有其局限性。在实际开发中，需要根据具体场景来选择合适的函数写法。