ES6箭头函数

箭头函数是ES6版本的JavaScript新特性，没有自己的this, arguments。箭头函数更适合那些需要匿名函数的地方，并且它们不能用作构造函数。

一、更简洁的函数

下面是一个箭头函数的例子

// 定义一个数组
var carBrands = [
    "BMW",
    "BENZ",
    "REAULT",
    "HONDA"
]
/**
 * 下面三种调用方式的作用是一样的
 */
carBrands.map(function (carBrand) {
    console.log(carBrand.length);
})


carBrands.map((carBrand) => {
    console.log(carBrand.length)
});

carBrands.map(carBrand => console.log(carBrand.length))
// 如果函数箭头不需要参数或需要多个参数，就使用圆括号代表参数部分
var f = () => 5;
// 等同于
var f = function() {
    return 5;
};


// 多个参数的情况
var sub = (num1, num2) => num1 - num2;
// 等同于
var sub = function(num1, num2) {
    return num1 - num2;
}

// 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加括号
var student = () =>({id:"12312", name:"张三"})

// 箭头函数让判断变得更加简洁
const isEven = n => n % 2 == 0;
const square = n => n * n;

二、不绑定this

箭头函数出现之前，每个新定义的函数都有它自己的 this值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被作为“对象方法”调用则为基础对象等）。This被证明是令人厌烦的面向对象风格的编程。

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    //  回调引用的是`that`变量, 其值是预期的对象. 
    that.age++;
  }, 1000);
}

或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向person 对象
  }, 1000);
}

var p = new Person();