JavaScript 中粗箭头功能

创新需要勇气。——<亨利·马蒂斯>

作为 ES6 中的新功能引入的粗箭头功能可以作为方便的工具来用更少的行编写更多的代码。该名称来自其语法，=>与细箭头相比，它是“胖箭头” ->。一些程序员可能已经从不同语言（例如Haskell），“lambda表达式” 或 “匿名函数” 中了解了这种类型的函数。之所以称为匿名，是因为这些箭头函数没有描述性的函数名称。

有什么好处？

语法：更少的LOC；function一遍又一遍地输入关键字
语义：this从周围环境中捕获关键字

简单语法示例

看一下这两个代码片段，它们的功能完全相同，您将很快了解胖箭头功能的作用：

// general syntax for fat arrow functions
param => expression

// may also be written with parentheses
// parentheses are required on multiple params
(param1 [, param2]) => expression


// using functions
var arr = [5,3,2,9,1];
var arrFunc = arr.map(function(x) {
  return x * x;
});
console.log(arr)

// using fat arrow
var arr = [5,3,2,9,1];
var arrFunc = arr.map((x) => x*x);
console.log(arr)

如您所见，在这种情况下，粗箭头功能可以节省您键入括号以及函数和return关键字的时间。我建议您始终在参数输入周围写上括号，因为多个输入参数（例如in中）将需要使用括号(x,y) => x+y。这只是应付不同用例中它们的一种方法。但上面的代码也将像这样工作：x => x*x。到目前为止，这些只是语法上的改进，从而导致更少的LOC和更好的可读性。

词汇绑定 this

使用胖箭头功能还有另一个很好的理由。上下文存在问题 this。使用箭头功能，您无需担心 .bind(this) 或进行设置 that = this ，因为粗箭头功能是 this 从词汇周围选择上下文的。看看下一个示例 - https://jsfiddle.net/pklinger/rw94oc11/

// globally defined this.i
this.i = 100;

var counterA = new CounterA();
var counterB = new CounterB();
var counterC = new CounterC();
var counterD = new CounterD();

// bad example
function CounterA() {
  // CounterA's `this` instance (!! gets ignored here)
  this.i = 0;
  setInterval(function () {
    // `this` refers to global object, not to CounterA's `this`
    // therefore starts counting with 100, not with 0 (local this.i)
    this.i++;
    document.getElementById("counterA").innerHTML = this.i;
  }, 500);
}

// manually binding that = this
function CounterB() {
  this.i = 0;
  var that = this;
  setInterval(function() {
    that.i++;
    document.getElementById("counterB").innerHTML = that.i;
  }, 500);
}

// using .bind(this)
function CounterC() {
  this.i = 0;
  setInterval(function() {
    this.i++;
    document.getElementById("counterC").innerHTML = this.i;
  }.bind(this), 500);
}

// fat arrow function
function CounterD() {
  this.i = 0;
  setInterval(() => {
    this.i++;
    document.getElementById("counterD").innerHTML = this.i;
  }, 500);
}