ES6语法五之箭头函数

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

大家好！我是前端爬楼工程师🚹，一个野生程序员。好奇新技术，仰慕牛大佬。如果喜欢我的文章，可以关注➕点赞，为我注入能量，与我一同成长吧～

ES6特性=>。

function foo(x, y){
    return x + y
}
var foo = (x, y) => x + y

包括一个参数列表（零个或多个参数，如果参数不是一个需要小括号包起来），然后是标识=>，函数体放在最后。

箭头函数是这一部分(x, y) => x + y, 然后这个函数引用被赋给变量foo。

函数体如果只有一个表达式可以省略{..},并且前面有一个隐含的return。

箭头函数总是函数表达式，并不存在箭头函数声明，它还是匿名的函数表达式。它们没有用于递归或者事件绑定/解绑定的命名引用。

箭头函数支持普通函数参数所有功能：默认值，解构，rest参数等。如果这个函数越长, => 带来的好处越小，反之越大。

this指向 在普通函数中，this指向是动态的，而在箭头函数中，是可以预测的。this在箭头函数中，和词法作用域有关。

var ctrl = {
    makeRequest: function(){
        var self = this;
        btn.addEventListener('click', function (){
            self.makeRequest()
        }, false)
    }
}

上述代码修改成箭头函数的话，是这样的：

var ctrl = {
    makeRequest: function(){
        btn.addEventListener('click',  ()=>{
            this.makeRequest()
        }, false)
    }
}

这样，省略了var self = this关键字function。

但如果全部改为箭头函数的话，this就会乱套。此时指向全局对象。

// 不推荐， 改变了函数原有的本意
var ctrl = {
    makeRequest: ()=>{
        btn.addEventListener('click',  ()=>{
            this.makeRequest()
        }, false)
    }
}

如果要还原函数原来的意思，我们需要把var self = this这样的hack，或者通过var arg=Array.prototype.slice.call(..)词法复制。这样就达到了安全的全部替换成箭头函数的目的了。

结语：虽然箭头函数给我带来了便利，但是我们在使用的过程中还是要注意一些隐秘的坑。this的指向问题，是否需要递归？是否需要硬绑定或者是解绑... 判断函数体的长度是否适用箭头函数，可读性如何？