javascript ES6的arrow function是方便的syntax sugar,可以幫助我們寫出更簡潔的js code
在arrow function還沒出現前,針對特定element綁定事件大致會像這樣:
document .getElementById('my-btn') .addEventListener("click", function(e) => { alert('before es6'); });
將以下的anonymous function替換成arrow function的寫法:
document .getElementById('my-btn') .addEventListener("click", (e) => { alert('arrow function'); });
只有一個參數時,可省略括號:
document .getElementById('my-btn') .addEventListener("click", e => { alert('arrow function'); });
若只有一行statement時,可以省略大括號
document .getElementById('my-btn') .addEventListener("click", e => alert('arrow function'));
其實從以上的範例還真看不出來arrow function強大的地方XD
頂多就只有省略function這個關鍵字和大括號而已
但其實這只是arrow function的其中一種寫法
更方便的用法還在後頭~
arrow function讓你不用.bind(this)
我們都知道javascript的this是一個很tricky的東西
和Java、C#、PHP等OOP的語言的this所代表的涵意是不太一樣的
言規正傳,如果不使用arrow function在setTimeout的callback中要取得object instance的this
就要使用.bind把object instance的this綁定給setTimeout的callback
function UserModel(id) { this.id = id; this.name = ''; setTimeout(function() { this.name = 'from remote'; }.bind(this), 1000); } var userModel = new UserModel(1); console.log(userModel.name);
但如果使用arrow function就簡單的多了,不需要加上.bind(this)
function UserModel(id) { this.id = id; this.name = ''; setTimeout(() => { this.name = 'from remote'; }, 1000); } var userModel = new UserModel(1); console.log(userModel.name);
結論
ES6的arrow function可以讓我們少寫一些程式碼
更容易處理this的指向,進而寫出更簡潔易懂的程式碼