JavaScript之箭头函数

一、基本内容
在ES6中，新增了一种函数：Arrow Function箭头函数。
1、作用: 定义匿名函数
2、基本语法:
参数的情况：
（1）没有参数: () => console.log(‘xxxx’)

 let fun1 = () => console.log('lalala');
 fun1();

（2） 一个参数: i => i+2。只有一个形参的情况,括号()可以省略

 let fun2 = a => console.log(a);
 fun2('qqq');   //qqq

如上图中也可以写成let fun2 = （a）

（3）大于一个参数: (i,j) => i+j。括号不能省略

let fun3 = (x,y) => console.log(x,y);
 fun3(1,2);  //1，2

函数体的情况：
（1）函数体只有一条语句或是表达式的时候，{}可以省略。会自动返回语句执行的结果或者表达式执行的结果。

 let fun4 = (x,y) => x + y;
 console.log(fun4(1,2));  //3

注意，若写成

let fun4 = (x,y) => {x + y};

还会打印成3吗？
答案是不会的，会打印成undefined。

要加上return，才能得到我们想要的结果

let fun4 = (x,y) => {return x + y};

（2）函数体不止一条语句或者表达式，{}不可省略

let fun5 = (x,y) => {
   console.log(x, y);
   return x + y;
 }
   console.log(fun5(7,8));  //15

二、this指向
定义：箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this。
这个定义并不是很好理解，这里有个扩展理解：
箭头函数的this看外层的是否有函数，
如果有，外层函数的this就是内部箭头函数的this，
如果没有，则this是window。

先在html里面定义id为btn的button按钮

let obj = {
                name:'qwer',
                getName:function(){
                  btn.onclick = () => {
                    console.log(this);
                  }
                }
              }
              obj.getName(); //打印obj

如上代码，外层有个常规函数function，由于obj.getName()的调用，所以它的this是obj。

let obj = { 
                name:'qwer',
                getName:() => {
                  btn.onclick = () => {
                    console.log(this);
                  }
                }
              }
              obj.getName();  //打印window

如上代码，虽然外层函数有，是箭头函数，但是也会指向window。
obj.getName可以理解成obj.getName = （） => {}；本质上是在window下定义的。

如有问题，欢迎指正，谢谢！