es6箭头函数

1. es6中新增的定义函数的方式

   (arg1,arg2,...) => {函数体};// ()放参数，{}中作为函数体
   // 等价于
   function (arg1,arg2,...) {
       函数体;
   }
   

2. 箭头函数的调用

   采用函数表达式的方式，用变量进行接收

   const fn = (n) => {
       return n * 10
   };
       console.log(fn(3));
   

3. 注意：

   1. 函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

      const fn = (n) => n * 10;
      console.log(fn(3));
      

   2. 如果形参只有一个，可以省略小括号

      const fn2 = n => n + 10;
      console.log(fn2(3));
      

4. 与this关键字的关系

   1. 与传统的函数不一样，箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置的上下文this

   2. 传统的函数

       var obj = { uname: 'zt'};
          function fn() {
              console.log(this);
              return function () {
                  console.log(this);
              }
          }
      
          let resFn = fn.call(obj);// 指向obj
          resFn();// 指向window
      

      关于传统函数this指向问题可以参考：类和对象

   3. 箭头函数

      var obj = { uname: 'zt'};
      function fn() {
          console.log(this);
          return  () => {
              console.log(this);
          }
      }
      
      let resFn = fn.call(obj);// 指向obj
      resFn();// 指向obj
      

      解释：由于箭头函数不绑定this关键字，其定义区域便为其this的指向，由于箭头函数定义在fn中，且fn指向为obj，因此箭头函数中的this指向也是obj

   4. 案例分析

      var obj = {
              uname: 'zt',
              fn: () => {
                  console.log(this.uname);
              }
          }
          obj.fn();// undefined
      

      箭头函数不绑定this关键字，其定义区域便为this指向，但是对象没有作用域，因此当前箭头函数中的this指向的是全局作用域，而全局作用域中没有uname属性，因此输出为undefined；