ES6-你不知道的箭頭函數

  一談到ES6的箭頭函數，你們可能想到的優勢就是語法更簡潔，由於去掉了return、function、{}等輸入。

  可是設計者果然就是出於簡潔的目的推出的箭頭函數嗎？顯然不是。

  => 箭頭函數this設計的主要目的，以特定的方式改變this的行爲特性，解決this相關編碼的一個常見的痛點。

  => 箭頭函數this設計的主要目的，以特定的方式改變this的行爲特性，解決this相關編碼的一個常見的痛點。

 

  => 箭頭函數this設計的主要目的，以特定的方式改變this的行爲特性，解決this相關編碼的一個常見的痛點。

 

  來看一個例子來看看這個痛點：

var utils = {
  getData:function(a,b){
    var self = this;
    builtinModules.addEventListener('click',function(){
      self.getData(12,34);
    },false)
  }
}

在這個例子裏面，爲了確保this的指向正確，因此咱們用了一個變量緩存this：

 var self = this;

而後再經過self去調用 this。。

self.getData(12,34);

this是動態綁定的，在本例子中，getData（） 的this 和 btn.click回調函數的this是不一樣。這種方式在ES5中太常見來

那麼ES6推出的箭頭函數，應該如何寫？是怎麼解決這個痛點呢？

  getData:function(a,b){
    // var self = this;
    builtinModules.addEventListener('click',() => {
      this.getData(12,34); // 這裏的this 跟 getData{}函數體裏面的this 保持一致
    
    },false);
  }

看到沒有，也就是說，箭頭函數，幫咱們解決了 var self = this；self.xxxx（）的痛點。甚至你能夠理解爲 箭頭函數就是替代了 var self = this這種詞法形式；

 

那麼問題來了。。。這種狀況該如何解決呢？？？

var utils = {
  getData:(a,b) => {
    // var self = this;
    builtinModules.addEventListener('click',() => {
      this.getUser（）;// error ！！！ 這裏的this並非指向的utils，因此訪問不到getUser.
    },false);
  },
  getUser:(a,b) => {
    // ...xxxx
  }
}

 

切記，箭頭函數中的this，指向包圍它的做用域，看以下代碼：

console.log(this);//--假設此處的this指向window

var obj = {
b:this,
a:()=>{
console.log(this);

}
}
obj.a(); // window
console.log(obj.b) // window

var obj2 = {
a:function(){
console.log(this);
},
b:this
}
obj2.a(); // {a:f，b：window}

　　

有上述例子可見：箭頭函數this指向其包裹的做用域，this指向了window（假設此時最外層的this是window）。

而function裏面的this（obj2.a），就是指向該obj2這個對象。

也就是說，一個對象裏面的箭頭函數，和普通function函數來比，箭頭函數的this 層級高於普通函數。

 

 

 

那麼什麼時候應該使用this函數呢？從一張圖能夠看出來：

 

 

 

 

 

 

最後，切記，千萬別認爲箭頭函數就是爲了少打字。無論多打字少打字，你得明白你輸入的每一個字的意義目的所在。