详解es6中箭头函数

基本用法

es6中用箭头定义匿名函数

   var f = v => v

相当于es5

   var f = function(v){
      return v;
   }

注意，如果箭头函数的代码块多于一句，箭头后面的返回值就要用大括号包起来，并显式写上return

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

相当于es5

   var f = function(num1, num2){
       return num1 + num2;
   }

如果不需要带参数，用一个括号代表参数部分

   var f = () => v

注意，由于箭头后的第一个大括号被解析成代码块，所以如果匿名函数返回一个对象，应该用括号括起来

   var f = () => ({ name: 'sysuzhyupeng', age: 24 })

箭头函数可以与解构一起使用

   const full = ({ first, last }) => first + ' ' + last;
   //equals
   const full = function(person) {
       return person.first + ' ' + person.last;
   }
   full({first: 1, last: 5}) // '1 5'

箭头函数让函数表达更简洁

   const isEven = n => n % 2 == 0;
   const square = n => n * n;

箭头函数另一个用处是简化回调函数

   var newArr = arr.sort(function(a, b){
       return a - b;
   })
   //es6
   var newArr = arr.sort((a, b) => a - b);

另一个例子

   [1, 2, 3].map(function(x){
       return x * x;
   })
   //es6
   [1, 2, 3].map( x => x * x);

使用注意点

1. 函数体内的this对象，就是定义时的this对象，而不是运行时的调用对象。所以箭头函数自带绑定this，在很多地方可以用到。
2. 不可以使用arguments对象，该对象在函数体内不存在

   function foo(){
      setTimeout(() => {
          //return不妨碍尾调用
          console.log(this.id)
      }, 100);
   }
   var id = 1;
   //setTimeout回调中定义的上下文是foo函数，而在事件队列中运行时的上下文是window，所以这里foo的上下文被改变之后，箭头函数定义的回调也同时被改变
   foo.call({ id: 2 })  // 2

如果是正常的运行时绑定，现在调用的对象是{ id: 2}，应该输出2。然而箭头函数绑定了定义时的对象，也就是window，所以输出1，当然严格模式下会输出undefined。
this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

   //实际上是这样的
   function foo() {
    var _this = this;
    setTimeout(function () {
        console.log('id:', _this.id);
        }, 100);
   }

嵌套的箭头函数

箭头函数内部，还可以再嵌套箭头函数，下面是一个es5的多重嵌套函数

   function insert(){
       return {info: function(array){
           return {after: function(afterValue){
               array.splice(array.indexOf(afterValue) + 1, 0, value);
               return array;
           }}
       }}
   }
   insert(2).into([1, 3]).after(1); //[1, 2, 3]

这个函数可以由箭头函数改写

   function insert(() => ({ info: (value) => ({ after: (afterValue)=>{  
       array.splice(array.indexOf(afterValue) + 1, 0, value);
       return array;
   }})})

es7的绑定符

ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。虽然该语法还是ES7的一个提案，但是Babel转码器已经支持。
函数绑定运算符是并排的两个双冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。

   foo::bar;
   // 等同于
   bar.bind(foo);
   foo::bar(...arguments);
   // 等同于
   bar.apply(foo, arguments);