JavaScript: 箭头函数

箭头函数可以说是es6的一大亮点，使用箭头函数，可以简化编码过程，是代码更加的简洁。

ES6 允许使用“箭头”（=>）定义函数。

    var f = a => a;
     
    var f = function (a) {
      return a;
    };

上面两个是同一个函数，实现功能都是返回a。可以看到使用箭头函数后代码简洁了很多。如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

    var f = () => 5;
    // 等同于
    var f = function () { return 5 };
     
    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function(num1, num2) {
      return num1 + num2;
    };

如果箭头函数的代码块大于一行，需要用大括号包起来使用。

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

大括号{}内容会被解释成代码块，所以如果返回的是对象，需要在外面加上一个括号。

let getTempItem = id => ({ id: id, name: "Temp" });

否则就会报错。如果代码只有一行且不需要返回，可以使用void，这样就不用大括号了。

使用箭头函数，可以让我们的回调函数特别的简洁。

    // 正常函数写法
    [1,2,3].map(function (x) {
      return x + x;
    });
     
    // 箭头函数写法
    [1,2,3].map(x => x + x);

剪头函数在使用时，this的指向会发生变化。在我们使用普通函数的时候

    function foo() {
      setTimeout(function(){
        console.log('id:', this.id);
      }, 100);
    }
     
    var id = 21;
     
    foo.call({ id: 42 });

这个时候console打印的id是全局的id也就是21。

但是如果使用箭头函数

    function foo() {
      setTimeout(() => {
        console.log('id:', this.id);
      }, 100);
    }
     
    var id = 21;
     
    foo.call({ id: 42 });

这个时候就是42了，这是因为箭头函数的定义生效在函数生成时，也就是指向了{id:42}所以最后打印的是42。

因为这个特性，箭头函数包含this的自定义对象方法中使用。

    const dog= {
      age: 9,
      ages: () => {
        this.age--;
      }
    }

当我们调用dog.ages的时候会报错，这是因为对象不单独构成作用域，箭头函数的this指向的是作用域是全局的。

还有就是动态的this也是不可以使用箭头函数的。比如当监听点击事件的时候，使用this处理点击对象，如果使用箭头函数就会报错，因为this指向的是全局对象了。