【面试题】ES6语法五之箭头函数

​​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​​的指向问题，是否需要递归？是否需要硬绑定或者是解绑... 判断函数体的长度是否适用箭头函数，可读性如何？