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

总结给大家推荐一个实用面试题库

巴特西

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

总结给大家推荐一个实用面试题库

1、前端面试题库（面试必备）推荐：★★★★★

2、前端技术导航大全推荐：★★★★★

3、开发者颜色值转换工具推荐：★★★★★

最新文章

热门文章

巴特西

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

总结给大家推荐一个实用面试题库

1、前端面试题库 （面试必备） 推荐：★★★★★

2、前端技术导航大全 推荐：★★★★★

3、开发者颜色值转换工具 推荐：★★★★★

最新文章

热门文章

1、前端面试题库（面试必备）推荐：★★★★★

2、前端技术导航大全推荐：★★★★★

3、开发者颜色值转换工具推荐：★★★★★