【JavaScript】箭头函数

原文地址：https://www.yuque.com/kuwu/opfh8y/gt51pf

箭头函数

箭头函数是在es6中引入的，用法十分简单，允许使用 => 定义函数

// 箭头函数
const fn = () => {
  //TODO: 函数体
  return "箭头函数"
}
// 相当于
function fn() {
  //TODO: 函数体
  return "箭头函数"
}

另一个用法上的简化是返回值，像上述函数直接返回值的时候可以写成这样

() => "箭头函数"

如果直接返回的值是一个对象，需要注意一下，写法有所不同

() => ({bar:1})

另外还可以配合rest参数使用

(header,...rest) => header // 返回第一个参数

注意点&与普通函数的差异

无this的强绑定

箭头函数无this的强绑定，一般在定义函数的时候确定而不是在执行函数的时候确定

// 普通函数
function foo() {
  setTimeout(function(){
    console.log('id:', this.id);
  },100)
}
var id = 1;

foo.call({ id: 2 }); // id: undefined
// 箭头函数
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}

var id = 1;

foo.call({ id: 2 });
// id: 2

普通函数
this 在普通函数中是函数执行时所在环境的this指向，100ms延时之后执行函数，此时指向 window 所以返回 undefined 
箭头函数
this 在箭头函数中总是指向函数定义生效时所在的对象，这里用 call 绑定了foo函数执行时的this指向，所以，在箭头函数定义时 this 为 {id:2} 所以返回 2 

没有arguments

箭头函数没有自己的 arguments 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：

function fn() {
    return () => arguments[0]
}
var res = fn(1);
console.log(res()); // 1

那如果我们就是要访问箭头函数的参数呢？
你可以通过命名参数或者 rest 参数的形式访问参数:

let res = (...rest) => rest;

无原型 & 不能使用 new & 没有super

不能使用new操作符

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

javascript中Function、ArrowFunction和GeneratorFunction介绍

由于不能使用 new 调用箭头函数，所以也没有构建原型的需求，于是箭头函数也不存在 prototype 这个属性。

var Foo = () => {};
console.log(Foo.prototype); // undefined

没有原型自然也不能通过 super  来访问原型的属性，所以箭头函数也是没有 super  的，不过跟 this 、 arguments 一样，这些值由外围最近一层非箭头函数决定。