JavaScript ES6箭头函数使用指南

什么是箭头函数？

箭头函数是ES6引入的一种新的函数定义方式， 它可以更简洁地定义函数，同时还有一些语法上的变化。箭头函数的语法如下：

(param1, param2, …, paramN) => { statements }

箭头函数的优点

1. 更简洁的代码

箭头函数是一种更简洁的函数定义方式，可以省略function关键字，同时也可以省略return关键字（当函数只有一行的时候）。

// ES5写法
function sum(a, b) {
  return a + b
}

// 箭头函数写法
const sum = (a, b) => a + b

2. 指向定义时所在的作用域

箭头函数和普通函数的一个重要的区别是箭头函数没有自己的this，箭头函数的this是定义时所在的作用域中的this。

const obj = {
  name: '小明',
  getName() {
    console.log(this.name)
  },
  getNameArrow: () => {
    console.log(this.name)
  },
}

obj.getName() // 输出：小明
obj.getNameArrow() // 输出：undefined

上面的代码中，getName方法是一个普通函数，getNameArrow是一个箭头函数。当调用getName函数时，函数内部的this指向obj对象。而当调用getNameArrow函数时，函数内部的this指向的是定义getNameArrow函数时所处的作用域，也就是全局作用域。因此，getNameArrow函数内部的name属性为undefined。

3. 不会被重写

箭头函数不会被Function.prototype.bind、Function.prototype.call、Function.prototype.apply等方法修改函数内部的this值。箭头函数的this值始终指向定义函数时所在的作用域中的this值。

箭头函数的示例

1. 箭头函数的基本用法

// 普通函数写法
function greeting(name) {
  return 'Hello, ' + name
}

// 箭头函数写法
const greeting = name => 'Hello, ' + name

console.log(greeting('张三')) // 输出：Hello, 张三

2. 箭头函数的this

const obj = {
  name: '小明',
  getName() {
    return () => console.log(this.name)
  },
}

const getName = obj.getName()

getName() // 输出：小明

上面的代码中，getName方法返回的是一个箭头函数。因为箭头函数的this值始终指向定义函数时所在的作用域中的this值，getName方法返回的箭头函数的this值就指向了obj对象。因此，调用getName函数时输出的值为小明。

总结

箭头函数是一个更简洁的函数定义方式，它和普通函数相比具有更简洁的代码、和定义时所在的作用域相同的this值、不会被重写等优点。在开发中，尤其是在处理事件或使用高阶函数时，箭头函数可以让代码更加清晰易懂。