ES6箭头函数

来由及核心：

箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,由于以往JS函数中最让人难以理解的this运行机制，箭头函数”绑定”this，很大程度上解决了这个困扰。

我们通过babel转义ES6函数的来理解一下：

// ES6
function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
// 转ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log('id:', _this.id);
  }, 100);
}

由上可看出，箭头函数里面根本没有自己的this，而是引用外层的this

衍生：

• 由于箭头函数没有自己的this：

  1. 所以当然也就不能用call()、apply()、bind() 这些方法去改变this的指向。
  2. 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令

• 箭头函数不是没有 arguments ，而是没有自己的 arguments，是父函数的arguments,如果没有父函数,则报错参数，可以使用rest获取参数（实现计算传入所有参数的和,用法：...args）

• 不可以使用yield命令，因此箭头函数不能用作 Generator 函数

基本用法：

ES6 允许使用“箭头”（=>）定义函数

var f = function (v) {
  return v;
};
//箭头函数
var f = v => v;

//不需要参数或需要多个参数，就使用一个圆括号代表参数部分
var f = () => 5
var sum = (num1, num2) => num1 + num2;

//代码块部分多于一条语句 使用{},返回使用retrun
var sum = (num1, num2) => { return num1 + num2; }

//箭头函数返回对象，由于{}被解析为块，需要（）包起来
let getTempItem = id => ({ id: id, name: "Temp" });

//箭头函数可以与变量解构结合使用
const full = ({ first, last }) => first + ' ' + last;
full({first:'liu',last:'li'})

//使用rest获取参数
const numbers = (...nums) => nums;//[1,2,3,4,5]
numbers(1, 2, 3, 4, 5)

注意点及不适用场景：

定义对象的方法，且该方法内部包括this

globalThis.s = 21;
const obj = {
  s: 42,
  m: () => console.log(this.s)
};
obj.m() // 21

需要动态this的时候，也不应使用箭头函数

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});
//事件中this就是全局对象。改成普通函数，this就会动态指向被点击的按钮对象