持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第15天，点击查看活动详情原文链接：Lucas Lobato ECMAScript 中最受欢迎的功能之一是箭头函数。你可能想知道为什么需要使用它们？让我给你一个答案：这是因为箭头函数最适合任何需要this绑定到上下文的东西，而不是函数本身。

语法

举个例子：

下面的函数是用旧的/ES5 语法编写的：

function sum(a,b) {
    return a+b
}

将他改造成箭头函数：

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

我们改造成了一行代码！箭头函数使代码更加简洁。由于隐式返回，我们可以省略花括号和 return 关键字。如果我们有多行代码，那么我们必须使用花括号并返回关键字：

const printSum = (a,b) => {

  const answer = a + b;
  console.log("Result: ", answer)

  return answer;
}

当只有一个参数时，括号是可选的.


const square = n => n * n

square(3)    //return --> 9

箭头函数的常见情况是使用数组方法。举个例子：

let numbers = [1, 2, 3, 4];

numbers.map(num => num+1); 

//  Output --> [2,3,4,5]

何时不使用箭头函数

到目前为止，我们已经讨论了箭头函数的强大和实用性。现在是时候讨论什么时候不使用箭头函数了。箭头函数在执行时不会创建自己的作用域。它们绑定到它们的封闭范围上下文，这意味着与常规函数不同，箭头函数没有自己的this. 例如：

const Person = () => {
  this.name = name;
  console.log(this);
}

const alex = new Person("Alex");   

// Uncaught TypeError: Person is not a constructor

在箭头函数中，它们没有自己的作用域，因此 this 将引用窗口对象。这导致 this 是一个窗口对象，并且它的任何属性都未定义。

再来看一个例子：


var obj = { // does not create a new scope
  i: 10,
  b: () => console.log(this.i, this),
  c: function() {
    console.log(this.i, this);
  }
}

obj.b(); // prints undefined, Window {...} (or the global object)
obj.c(); // prints 10, Object {...}

如我们所见，使用箭头函数创建的方法 b 输出一个未定义的值和一个窗口对象；而使用常规函数构造的方法 c 正确输出。

结论：

箭头函数是 ES6 的一个很好的新增功能，它为我们带来了一个语法紧凑的常规函数替代方案。箭头函数没有自己的 this。this使用封闭词法范围的值。箭头函数不适合用作方法，它们不能用作构造函数。

ES6的箭头函数

语法

何时不使用箭头函数

结论：