箭頭函式的注意事項

箭頭函式的注意事項

前言

  ECMAScript6新增了箭頭函示語法，在網路上找到這篇ECMAScript 6 入门，看起來是個方便的語法，至少程式碼看起來比較簡短。在實際使用後發生了問題，在此做個紀錄。

內容

  箭頭函式剛用起來都沒什麼問題，但在使用到和'this'有關的時候可能會發生問題，範例如下

function CA(){
  this.value = 1234;
  this.myCall = function(callBackFun){
    callBackFun.call(this);
    
  };
  this.arrowCall = ()=>{
    console.log(this.value);
  };
}
let a = new CA();
//normal funciton call
a.myCall( function(){
  //output:1234
  console.log(this.value);
  
});
//arrow function call
a.myCall( ()=>{
  //output:undefined
  console.log(this.value);
  
} );
//output:1234
a.arrowCall();

這個範例在使用箭頭函式傳入"myCall"後會發現無法正常存取"value"，如果把當下的"this"應出來會發現是"global"，再來看看"arrowCall"，在建構時使用箭頭函式，結果是正確的，this可以正常存取"value"。箭頭函式的"this"是建構當下的物件，無法透過call()來賦予"this"，詳細的規則可以參考箭頭函式。如果覺得麻煩的話就在使用時想想這個函式會不會使用到"this"，如果會就用舊的方式，如果不會就使用箭頭函式(看起來比較簡短)。

參考資料

ECMAScript 6 入门
箭頭函式