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: 箭头函数