箭頭函數理解

參見 https://www.jianshu.com/p/051...
https://segmentfault.com/a/11...

接下來仨
https://segmentfault.com/a/11...
箭頭函數
https://es6.ruanyifeng.com/#d...
https://segmentfault.com/a/11...

如下主要記錄本身不太懂的地方，詳解見上述連接

注意點

箭頭函數有幾個使用注意點。

（1）函數體內的this對象，就是定義時所在的對象，而不是使用時所在的對象。
（2）不能夠看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。
（3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。
（4）不可使用yield命令，所以箭頭函數不能用做 Generator 函數。

箭頭函數根本沒有本身的this，致使內部的this指向了外層代碼的this，這個指向在定義時就已經肯定而不會在調用時指向其執行環境的（變量）對象。除了this，如下三個變量在箭頭函數之中也是不存在的，指向外層函數的對應變量：arguments、super、new.target。

因爲箭頭函數沒有本身的this，因此固然也就不能用call()、apply()、bind()這些方法去改變this的指向。

基礎

1. 因爲大括號被解釋爲代碼塊，因此若是箭頭函數直接返回一個對象，必須在對象外面加上括號，不然會報錯。

let getTempItem = id => ({ id: id, name: "Temp" });

1. 箭頭函數能夠與變量解構結合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同於
function full(person) {
  return person.first + ' ' + person.last;
}

用途

1. 簡化回調函數
2. 解構爲數組

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

實戰

超時調用（setTimeout回調）的代碼都是在全局做用域環境中執行的，所以（setTimeout回調）函數中this的值在非嚴格模式下指向window對象，在嚴格模式下是undefined

不適用場合
第一個場合是定義對象的方法，且該方法內部包括this。會指向全局變量，由於對象不構成單獨的做用域，致使箭頭函數定義時的做用域就是全局做用域。

const cat = {
  lives: 9,
  jumps: () => {
    this.lives--;
  }
}

第二個場合是須要動態this的時候，也不該使用箭頭函數。

var button = document.getElementById('press');
button.addEventListener('click', () => {
  this.classList.toggle('on');
});

上面代碼運行時，點擊按鈕會報錯，由於button的監聽函數是一個箭頭函數，致使裏面的this就是全局對象。若是改爲普通函數，this就會動態指向被點擊的按鈕對象。

嵌套的箭頭函數（沒看）