es6 - 箭头函数

es6 - 箭头函数

哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号 ，所以才叫箭头函数。 瞬间感觉：“呵，这名字起的...”。

es6增加了箭头函数的特性当然不是为了装B，它可以看作是js中函数的一次进化。

我们知道，在js中，函数有着不一样的地位，除了作为普通函数外，它可以用来构造自定义类型，作为对象的方法，通过调用bind方法得到一个新函数。在后三者的使用中，大多数情况下都要用到一个特性 this。

函数中，this是动态绑定的，它的值是根据调用的上下文来确定的，关于函数的4种使用方式，书中都已经有了详细介绍，不再赘述。但是，this在带来强大能力的同时，也增加了编程错误的几率。即使是有经验的开发者，在使用this时，也可能因为疏忽而导致错误，而且，它会让代码更加难以理解。

箭头函数，可以解决上面的问题。

而且，箭头函数可以写的非常的简洁。

语法

箭头函数简洁的语法

程序员很懒的，我们热衷于各种脚本语言，语法糖。不就是因为他们能够让开发更有效率，让代码写的更少，更爽吗？箭头函数简化了函数的语法。

(arg1, arg2, ...) => {
    //...
}

上面是一个标准的箭头函数的写法，左边的()中填入函数参数，右边的{}中写入执行语句。

当函数参数只有一个时，()可以省略。 当右边{}中只有单行语句时，{}可以省略。可能有下面这种形式：

let square = x => x*x ;

它相当于普通函数的

let square = function(x){
    return x*x;
}

箭头函数的用法有以下几种：

let sum = (num1, num2) => num1 + num2 ; //作为普通函数使用

let arr2 = [1,2,3,4].map( item => item*2 ); //作为回调使用

(() => { //语句... })();                    //作为立即执行的匿名函数使用

箭头函数中的this

箭头函数与普通函数最大的不同就是this，前面已经讲过了，普通函数中this是根据上下文确定的。而在箭头函数中，没有this绑定。

也就是说箭头函数的this的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。如果箭头函数外部是一个非箭头函数，箭头函数内部this的值就与该函数一致。 如果箭头函数外部是全局环境，那么this的值就是全局对象 - window(浏览器环境)或global(node环境)。
比如：

var PageHandler = {
    id: '123456',
    init: function(){
        document.addEventListener("click",
            event => this.doSomething(event.type), false);
    },
    doSomething: function(type){
        console.log("Handling" + type + "for" + this.id);
    }
}

在上面这段代码中，由于箭头函数中this与其外部init函数保持一致，因此，this保存的就是PageHandler对象的引用，所以可以调用doSomething方法。

如果使用普通函数代替箭头函数，那么这样使用this会导致错误，因为这时this指向的document对象。 通用的解决方法是在init中保存this的引用var _this = this，然后使用_this代替this。

箭头函数的arguments

js函数中的arguments给了我们操作函数参数极大的便捷和灵活性。 但是，同this一样，在箭头函数中，没有arguments绑定。

箭头函数中的arguments依然要根据定义时的作用域链进行查找。

虽然，箭头函数中我们无法再使用arguments来操作函数参数， 但是我们可以使用es6中的剩余参数特性来获得同以前arguments同样的效果。比如：

let sum = (...rest) => console.log(rest.length)

注意事项

• 在使用箭头函数的简写形式时，要注意一点：

let getData = () => {name: 'icode007', age: 27}; //会报错

报错的原因是js把 =>右边对象的{}当成了函数体的{}， 因此，要使用()把对象包裹起来

let getData = () => ({name: 'icode007', age: 27}); 

• 在箭头函数中，不仅仅是this，arguments没有绑定。

同样没有绑定的还有super：es6特性，super指向当前对象的原型对象，相当于Object.getPrototypeOf(this).call(this)

new.target: es6特性，用于确定函数的使用方式，如果作为普通函数调用，该值等于undefined，如果作为构造函数调用，该值指向新创建对象实例的构造器。

最佳实践

箭头函数相比于普通函数有很多优势：代码简洁，性能更好，避免了this的问题等，因此可以大量使用。

就个人感觉来讲，箭头函数更接近于函数的原本的能力。如果仅仅是想封装一段代码，或是作为回调函数使用，而不是用作构造函数，函数绑定等功能。使用箭头函数可以更好。总之，当你在函数中无需使用this时，使用箭头函数可能是更好的选择。

箭头函数也有很多不适合的场景：
比如，作为方法使用时，不要使用箭头函数。不要为了过分追求代码的简洁而让函数变得难以阅读和理解等。 知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。

什么时候不能使用箭头函数？：知乎

可以关注我的专栏学习es6, 打算对es6知识进行一下系统总结，欢迎共同学习。

参考文献: MDN: 箭头函数