ES6系列之箭头函数

本系列是在平时阅读、学习、实际项目中有关于es6中的新特性、用发的简单总结，目的是记录以备往后温习；本系列预计包含let/const、箭头函数、解构、经常使用新增方法、Symbol、Set&Map、Proxy、reflect、Class、Module、Iterator、Promise、Generator、async/await。。。

箭头函数顾名思义就是带箭头的函数，^-^，其实想表达的是箭头函数本质仍是函数，那箭头函数和es5的函数有什么区别呢？

• 不绑定this

  var obj = {
          age: 1,
          say: function() {
              setTimeout(function() {
                  console.log(this, this.age); // window undefined
              }, 0);
          },
      }
  
      var obj1 = {
          age: 1,
          say: function() {
              setTimeout(() => {
                  console.log(this, this.age); // obj1 1
              }, 0);
          }
      };

  这里能够看出箭头函数中访问的this其实是其父级做用域中的this，箭头函数自己的this是不存在的，这样就至关于箭头函数的this是在声明的时候就肯定了（由于至关于做用域嘛），这个特性是颇有用的

  var handler = {
          id: '111',
          doSomething: function(e) {
              console.log(e);
          },
          init: function() {
              document.addEventListener('click', (event) => { // 这里绑定事件，函数this就能够访问到handler的方法doSomething
                  this.doSomething(event);
              }, false);
          }
      }
  
      handler.init();

• 不能够做为构造函数来使用

  var Person = (name) => { // Uncaught TypeError: Person is not a constructor
          this.name = name;
      }
  
      var person = new Person('Jack');

  这个特性很容易测试，若是上一条明白的话也很容易理解： 箭头函数压根就没有this，固然不能做为构造函数（若是明白构造函数new的过程的话，插一句： new的过程其实就是建立一个对象，将this指向该对象，而后执行代码初始化这个对象，最后返回）

• 不绑定arguments（若是有要使用arguments的时候可使用rest参数代替）

  var foo = (val) => {
          console.log(arguments); // Uncaught ReferenceError: arguments is not defined
      };
      foo();

  这个特性也很好测试，可是实在要使用arguments对象要怎么办呢？咱们可使用es6的另外一个新特性rest参数，完美替代

  var foo = (...args) => {
          console.log(args); // [1, 2, 3]
      };
      foo(1, 2, 3);

• 不可使用yield命令，所以箭头函数不能用做Generator函数（这个后面总结到generator函数时再作解释）

 箭头函数不适用的场景（或者不建议使用的场景）

这里说的不适用有些是压根不能用，有些是若是使用了箭头函数可能会产生意想不到的结果

1. 做为对象的属性

   var obj = {
           a: () => {
               console.log(this); // window
           }
       };

   做为对象的属性时，this的指向则再也不是对象自己了，这就形成了意想不到的结果

2. 构造函数（前文已经说过）
3. 做为原型方法

   function Person(name) {
           this.name = name;
       }
   
       Person.prototype.say = function() {
           console.log(this); // 指向实例
       };
   
       Person.prototype.bark = () => {
           console.log(this); // window
       };
   
   
       var pe = new Person('Jack');
       pe.say(); // {name: 'Jack'}
       pe.bark(); // window

   从例子中咱们看到了，箭头函数做为原型方法时，this指向出乎了咱们的意料

4. 须要动态this的时候（这个地方须要本身进行判断），这里只举个例子便于理解

   document.addEventListener('click', () => {
           console.log(this); // window
       }, false);
   
       document.addEventListener('click', function() {
           console.log(this); // #document对象
       }, false);
   
   // 通常状况，咱们绑定事件处理函数时但愿函数内部的this指向绑定的Dom对象，可是若是使用了箭头函数，则this则会出乎咱们的意料