js中箭頭函數=>的使用和特性

基礎使用說明

// 基本的function聲明
var a1 = function(a){
    return a*a
}
// 改造成箭頭函數
var a2 = (a)=>{
    return a*a
}

進階

• 1.當函數的傳參爲一個時，可以直接去掉括號a=>{return a*a}
• 2.但只解構一個值必須要括號({a1})=>{return ++a1}
• 3.當函數內只需要return 結果時，可以直接這樣a=>a*a
• 4.作爲callback傳入

function f1(callback){
    var a = 1,
        b = 2
   	callback(a,b)
}
f1((aa,bb)=>{
    console.log(aa+bb) //3
})

但要注意的是，這裏callback傳入有個this指向的問題

var a1 = {
    name: 'a1',
    fun(callback){
        callback.call(this)
    }
}
var a2 = {
    name: 'a2',
    test(){
        a1.fun(()=>{
            console.log(this.name);
        })
    }
}
var a3 = {
    name: 'a3',
    test(){
        a1.fun(function(){
            console.log(this.name);
        })
    }
}
a2.test() //a2
a3.test() //a1

這個問題在jq的選擇器裏的this操作很致命的，例如下面這個的this就沒法指向點擊的目標

$('.alert-msg').on('click',()=>{
    alert($(this).attr('msg'))
})

可能還有其他特性沒發現，歡迎討論 😃