Javascript箭頭函式(ArrowFunctions)踩坑:this
慢慢地開始從老古板Javascript functions寫法轉向ES6的箭頭函式Arrow Functions寫法,不幸的因為jQuery踩到了一個Arrow Functions的坑,一切要從click事件說起。
jQuery的click事件
先說明,所有的問題都不關jQuery的click事件的事,程式碼如下:
<div>
<span title="TestingTitle">SPAN With title</span>
<span>Pure SPAN</span>
</div>
//所有的span有出現title屬性的都select
$("span[title]").click(function(){
alert("TitleSpan: " + $(this)[0].constructor);
});
//所有的span都select
$("span").click(() => {
alert("PureSpan: " + $(this)[0].constructor);
});
在還沒有踩到坑之前,我一直以為這兩個method抓到的$(this)理論上應該會一樣的,會踩到這個坑是因為我發現為何我的$(this)操作總是回傳給我沒有這個屬性之類的錯誤?經過不斷的黑人問號後才發現...箭頭函式根本沒有this。
以上面的程式碼來說,當使用者點選了具備Title的span,會跳出兩個alert訊息如下:
//第一個可理解,這是我們期待的this物件回傳。
TitleSpan: function HTMLSpanElement() { [native code] }
//第二個this回傳Window物件是三小?
PureSpan: function Window() { [native code] }
使用前請詳閱公開說明書
去MDN一查才發現,人家開宗明義就跟你聲明請不要把箭頭函式(Arrow function expressions)當作method,因為他的this會去抓當前宣告語法的父層物件,而因為我們的jQuery寫法是寫在Javascript的root scope,所以抓到最上層的Window物件,原文如下,唉~
Does not have its own bindings to this or super, and should not be used as methods.
心得筆記
使用箭頭函式Arrow Functions用到this寫法要非常謹慎,甚至最好不要用。