详解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);