深刻理解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就會動態指向被點擊的按鈕對象