當下不可不知的es6箭頭函數

 相信各位大俠對ES6並不陌生了，因此在此再也不贅述它的歷史與由來，直接進入正題。

 

 jQuery的這種寫法可能已經被寫爛了：

$(".submit-btn").click(function(){
　　ajax();
});

 那麼來個新鮮的：

$(".submit-btn").click(() => ajax())；

第一次接觸箭頭函數的寫法，彷佛以爲沒法理解，別急，咱們先來了解一下ES6箭頭函數的基本語法:

([param], [param]) => {
   statements
}
// param 是參數，根據參數個數不一樣，分這幾種狀況：  // () => { … } 零個參數用()表示function；  // x => { … } 一個參數時能夠省略()；  // (x, y) => { … } 多參數不能省略()

 

 看過語法後，是否是以爲箭頭函數簡潔明瞭，至少不用寫function了，不會再出現由於function寫成functoin而報錯的尷尬了。那麼箭頭函數的好處僅此而已嗎？若是僅僅如此，那固然是太膚淺了。

 

當function函數體中只有一句return語句時，也可將return省略。

// ES5
var total = values.reduce(function (a, b) {
      return a + b;
}, 0);

// ES6
var total = values.reduce( (a, b) => a + b, 0 );　　// 兩個參數a,b ，因此參數外層的 () 不可省略

var f = v => v; // 等同於 var f = function(v) { return v; } var f = () => 5; // 等同於 var f = function() { return 5; } var sum = (num1, num2) => num1 + num2; // 等同於 var sum = function(num1, num2) { return num1 + num2; }

只有一些省略單詞的功能嗎？of course NO ！

對於傳統function函數，都有屬於本身的this值，使得內層函數的this值多是window、undefined或者內層函數自身的對象，這也製造了很多麻煩，好比咱們寫過這段hack用來處理this的指向問題：

// ES5
{
　　...
   add: function(arr){
      var that = this;
      _.each(arr, function (item) {

　　　　　　// 此函數裏的this並非能夠調用add方法的對象，須要用that保存外層能夠調用add方法的this對象

　　　　　　that.add(item);

 }) 　　} 　　... }

假如函數嵌套太深，this問題是很頭疼的，此時輪到箭頭函數登場了，箭頭函數能夠繼承外圍做用域的this值：

// ES6
{
　　...
    add(arr) => {

　　　　// 這裏的this繼承自外層對象的this，而不是each方法中本身的this

　　　　_.each( arr, item => this.add(item) )　　
　　　　
　　}
　　...
}

 在ES6的版本中，add方法從它的調用者處獲取了this值，而其內部函數是一個箭頭函數，因此該箭頭函數繼承了外圍做用域的this值。

另外，箭頭函數還能夠與ES6新特性「變量解構」結合使用，十分方便，想了解的請戳變量解構

// ES5
  function full(obj) {
     return obj.name + ',' + obj.age;
  }

// ES6
　 const full = ({ name, age }) => name + ',' + age;　　// 只有一句代碼因此省略return

 

學習了箭頭函數的幾種基本用法，我來提幾點須要注意的地方，防止你們在用的過程當中踩雷。

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

var getObj = id => ({ id: id, name: "objName" });

var getObj = id => { id: id, name: "objName" };　　// 報錯

 

 二、箭頭函數與非箭頭function函數間有一個細微的區別，箭頭函數沒有它們本身的arguments對象。

function showArgs() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100);
}

showArgs(1, 3, 5)
// args: [1, 3, 5]  這裏的argments其實是showArgs的arguments

 

 三、箭頭函數不可看成構造函數，也就是說，不可使用new命令，不然會拋出一個錯誤。緣由是它沒有屬於本身的this。

 

 四、箭頭函數沒法使用call()、apply()、bind()等方法改變this指向，由於它並無this值。

(function() {
  return [
    (() => this.x).bind({ x: 'inner' })()
  ];
}).call({ x: 'outer' });

// ['outer']  箭頭函數的bind()方法無效