箭头函数

箭头函数1

作用：
函数目的指向性更强，可读性更好，简化代码，提升开发效率。

箭头函数如何声明：

        //正常函数
        var sum = function(a, b){
            return a + b;
        };

        //写成箭头函数
        let sum = (a, b) => {
            return a + b;
        }
        //或者更简单的，即不写return也行
        let sum = (a, b) => a + b;
       

如果箭头函数的代码块部分多于一条语句，就要使用大括号将其括起来，并使用return语句返回，例如：

        var sum = (num1, num2) => {return num1 + num2;}

由于大括号被解释为代码块，所以如果 return 结果是个对象，为了避免与多代码块的结果混淆，需添加 ( ) 包裹对象，例如：

        var getTempItem = id => ({
            id: id,
            name: 'Temp'
        });

一个函数的参数或者返回值是函数，我们都可以称它为高阶函数
例如：

        function sum (x) {
            return function(y){
                return function(z) {
                    return x + y + z;
                }
            }
        };

以上函数转换成箭头函数（中间步骤）

        let sum = (x) => {
            return (y) => {
                return (z) => {
                    return x + y + z;
                }
            }
        };
        

再简化成最终形式 ↓↓↓

        var sum = x => y => z => x + y + z;

可用以下代码执行

        
        console.log(sum(1)(2)(3));   //结果为6

箭头函数特点：

1. 不用写function关键字。
2. 只能作为函数使用不能new，没有原型。
3. 参数不能重复命名（普通函数重复参数不会报错，但箭头函数会）。
4. 返回值可以不写return，但是有时需要配合{ }。
5. 内部arguments this由定义时外围最近一层的非箭头函数的arguments和this决定其值。

箭头函数2

声明形式可以有多种：

1. 直接声明
2. 对象声明
3. 数组声明
   示例如下：

        
        //直接声明
        let sum = () => {

        }
        sum();

        //对象声明
        let obj = {
            fn: () => {

            }
        }
        obj.fn();

        //数组声明
        let arr = [() => {}];
        arr[0]();

关于this指向——注意：当箭头函数定义在全局时，则 this 指向Window

在普通函数中，arguments指向自身参数，是一个类数组，示例如下：

        let sum = function(a, b) {
            console.log(arguments,a,b);
        }
        sum(1,2);

以上代码会输出一个包含参数1,2的类数组。而arguments后边的a,b是无意义的

但当此情况出现在箭头函数中时，如下：

        let sum = (a,b) => {console.log(arguments, a, b);}
        sum(1,2);

就会报错：arguments is not defined

这是因为：内部arguments this由定义时外围最近一层的非箭头函数的arguments和this决定其值。
所以修改为以下形式就能正常运行 ↓↓↓

        function outer(){
            let sum = (a, b) => console.log(arguments, a, b);
            sum(1, 2);
        }

        outer(9,10,11);

那么这种特点有什么用呢？
可看以下代码：

        function Curry(){
            var arg = arguments;
            return function(){
                console.log(arg, arguments)
            }
        };
        Curry('a','b')(1,2);

输出结果如下：

以上代码就可通过箭头函数简化为：

        function Curry(){
            return () => {
                console.log(arguments)
            }
        };
        Curry('a','b')(1,2);  //只为输出外围函数的arguments

箭头函数3

如果箭头函数外围再没有别的普通函数，那么它的 this 指向 window
而相同情况下 arguments 会报错
除了这一点 this 与 arguments 不同，别的都是一样的，示例如下：

        let sum = () => {
            console.log(this);  //输出arguments时会报错
        };
        sum();

当箭头函数的 this 被定义了之后，它的指向就是固定的了，不会因为使用场景而发生变化，示例代码如下：

        var a = 'outerObj';
        
        let sum = () => {
            console.log(this.a);
        };

        let obj = {
            a: 'innerObj',
            fn: sum
        };
        obj.fn();   //输出 outerObj

对象不是函数

在对象中想将某个属性指定为函数，可以采用省略写法，如下：

        var a = 'outerObj';

        let obj = {
            a: 'innerObj',
            fn(){
                let sum = () => {
                    console.log(this.a);
                }
                sum;
            }
        };
        obj.fn();   //输出innerObj

即使将上述代码中的sum函数返回出去再执行，结果也一样。因为this指向固定

setTimeout在非严格模式下this指向windows，严格模式下this为undefined
所以部分相关问题可采用箭头函数解决，如下：

        let obj = {
            ms: 'abc',
            fn(){
                setTimeout(() => {
                    // this obj
                    console.log(this.ms)
                }, 500)
            }
        };
        obj.fn();

通过babel编译后的箭头函数
上述代码变成如下形式 ↓↓↓

        var obj = {
            ms: 'abc',
            fn: function fn(){
                var _this = this;

                setTimeout(function(){
                    console.log(_this.ms);
                },500);
            }
        };
        obj.fn();

由此可见，语法糖是不改变本质的。

箭头函数补充说明
箭头函数的写法是比较擅长去处理数组的
示例：

        let arr = [10, 20, 30, 40, 50, 60];
        console.log(arr.map(function(ele){
            return ele * ele;
        }));

        //可简写为
        console.log(arr.map(ele => ele * ele));

同理其它数组操作也可考虑灵活利用箭头函数提高效率。

注意：箭头函数在参数和箭头之间不能换行。

箭头函数部分到此暂时完结，欢迎补充。。。