深刻理解ES6之箭头函数

上个月本身花了 1300 买了阿(a)里(li)的 服 务 器来学习 node 及对应的框架，在 11 号以前它们有作活动，1300 的配置如今一年只要 86 元，三年只要229元，真心以为很划算了，能够点击本条内容进行参与

1 箭头函数的基本用法

const func = value => value
复制代码

至关于

const func = function(value) {
  return value
}
复制代码

1.1 基本用法

// 不传参数
const func = () => 'result'
// 等同于
const func = function () {
  return 'result'
}
复制代码

// 多个参数
const sum = (a, b) => a + b
// 等同于
const func = function (a, b) {
  return a + b
}
复制代码

// 函数有多条语句时用{}包裹
const foo = () => {
  // do something
  return 'result'
}
// 返回一个对象
const info = () => ({name: 'zyk', age: 24})
复制代码

// 与变量结构结合使用
const foo = ({firstName, lastName}) => 'fullName:' + firstName + lastName
foo({firstName: 'z', lastName: 'yk'}) // fullName:zyk
复制代码

2 箭头函数与普通函数的区别（箭头函数须要注意的地方）

2.1 函数内部this指向（本质上箭头函数没有this）

普通函数中的this指向是在运行时基于函数的执行环境绑定的，也就是动态的。而箭头函数偏偏相反，箭头函数的this指向定义时所在的环境，它时静态固定的。 致使这个区别的缘由并非箭头函数内部有什么特殊的绑定机制，而是由于箭头函数没有本身的this，因此须要经过查找做用域链来肯定 this 的值，致使内部的this就是外层代码块的this。

// 箭头函数中
function foo() {
  setTimeout(() => {
    console.log(this)
  }, 0)
}
// 等同于普通函数
function foo() {
  var that = this
  setTimeout(function () {
    console.log(that)
  }, 0)
}
复制代码

2.2 箭头函数内部没有arguments对象

因此在箭头函数内部使用arguments时会使用函数父级做用域中的arguments对象。若是想访问箭头函数的参数，可使用rest参数的形式访问

const foo = (...num) => console.log(num)
foo(1, 2, 3, 4) // [1, 2, 3, 4]
复制代码

2.3 不能使用new关键字调用

JavaScript 函数有两个内部方法：[[Call]] 和 [[Construct]]。 当经过 new 调用函数时，执行 [[Construct]] 方法，建立一个实例对象，而后再执行函数体，将 this 绑定到实例上。 当直接调用的时候，执行 [[Call]] 方法，直接执行函数体。 箭头函数并无 [[Construct]] 方法，不能被用做构造函数，若是经过 new 的方式调用，会报错。

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

3 不适用箭头函数的场景

虽然箭头函数很大程度上解决了this指向的困扰，推荐在编码中尽可能的使用箭头函数，但还有两个不适用的场景

3.1 不该被用在定义对象的方法上

能够经过这个例子进行解释

const obj = {
  val: 1,
  foo: () => console.log(this.val, this),
  bar: function() {
   console.log(this.val, this)
  }
}
obj.foo() // undefined window
obj.bar() // 1 obj:{}
复制代码

能够看出对象的方法使用箭头函数时，因为对象不构成做用域，因此箭头函数内部的做用域根据做用域链查找最后绑定到了全局的做用域。所以不会获得预期的结果。

3.2 须要动态this的时候，也不该使用箭头函数

var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  this.classList.toggle('on');
});
复制代码

执行时会报错，由于btn的监听函数是一个箭头函数，致使里面的this就是全局对象。若是改为普通函数，this就会动态指向被点击的按钮对象