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'))
})

可能还有其他特性没发现，欢迎讨论 ????