HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<ul class="ex1">
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>
<ul class="ex2">
  <li>111</li>
  <li>222</li>
  <li>333</li>
</ul>

當時的狀況

1
2
3
$(".ex1 li").click(() => { // 使用箭頭函式
  console.log($(this).text()); // 輸出結果什麼都沒有
});

後來改成ES5 function寫法後
就可以正確取到litext()值了

1
2
3
$(".ex1 li").click(function () { // 改用用傳統函式
  console.log($(this).text()); // 這樣就會輸出<li>裡的 text 值
});

那如果我還是想使用箭頭函式
並且在callback中取到這個event物件的值
那就配合使用event 參數 : 參考 JQuery: .click()
所以我們可以改成這樣

1
2
3
4
$(".ex1 li").click((event) => { // 使用箭頭函式
  let this = event.currentTarget;
  console.log($(this).text()); // 輸出結果什麼都沒有
});

另外補充一下currentTargettarget的差別 : 參考 JQuery: Event Object
currentTarget : $(“elenemt”) 這個物件
target : $(“elenemt”) 底下觸及的物件, ex:

, $(“body”).click()後,若你click在div上,則event.target會是這個div底下所有包含的東西

根據上述問題整理一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
$(".ex1 li").click("eventData", (event) => {
  console.log(event.data); // eventData
  console.log(event.currentTarget); // li element
  console.log(this); // window object
  console.log(this === window); // true
  console.log(this.document === document); // true
});

$(".ex2 li").click("eventData2", function (event) {
  console.log(event.data); // eventData2
  console.log(event.currentTarget); // li element
  console.log(this); // li element
  console.log(this === event.currentTarget); // true
});

探討this問題

其實上面的問題解完後 還有一個this的問題需要深入探討

這篇: 卡斯伯 - 箭頭函式 (Arrow functions) 已經寫得很好了
我就不太多做this的說明

就以本篇文章遇到的this狀況來說

若是 .click(function(){console.log(this)}) : this是指向創造這個function的物件

若是 .click(() => {console.log(this)}) : 由於箭頭函式找創造function的物件,所以找到全域window,所以callback function裡面那個this就變成全域window

重要 => 箭頭函式裡的this會指向創造他的物件上

拿個比較合適的範例說明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
var auntie = {
  name: '漂亮阿姨',
  callName () { // 註: 傳統方法的簡寫
    setTimeout(() => {
      // 箭頭函式中會自動指向生成的物件上
      console.log(this); // auntie 這個物件
    }, 10);
  }
}
auntie.callName();

Summary

其實javascript的this因為ES5和ES6的版本
衍生出蠻多使用情況
其實我也要來回讀很多次才會懂
建議要自己下去開個html實作看看才會有深刻的感覺
網路上可以找到很多相關的文章 keyword : ES6 this

理解ES6 this後
就會比較清楚當初jquery closure function會出現this的物件錯誤
如果之後再遇到類似的狀況
其實只要發現arrow function不行就換成傳統function
但網路上好像也有人建議說不要混搭
統一function寫法風格比較不會造成維護困難
arrow function能做到的,好像傳統function也都能做到
差別應該就是程式碼簡潔和設計概念

References