JavaScript(ES6)—箭头函数

1.箭头函数作用

作用：定义匿名函数

function (){}     ——>    ()=>{}        参数、函数体

2.箭头函数基本语法

 *没有参数： ()=>console.log('xxx')
 *一个参数：  i=>i+2 
 *大于一个参数 :   (x,y)=>x+y

写法规则：
1.箭头函数的参数可以一直加()，但只有一个参数时，可加可不加。
2.箭头函数的函数体可以一直加{ }，但函数体只有一条语句时，可加可不加。

    若加{ }时，要返回内容，则需要用return
    若不加{ }时，则可以自动返回语句或表达式执行的结果，不需要return

使用场景：多用来定义回调函数

<script type="text/javascript">
//形参的情况：
    //1.没有形参的时候
        let fun3=()=>console.log("我是箭头函数3");
        fun3();
    //2.只有一个形参的时候,    形参的位置()，可加可不加；
       let fun4=(a)=>console.log(a);
       fun4("aaa");
       let fun5=b=>console.log(b);
       fun5("bbb");
    
    //3.两个及两个以上形参的时候,   形参的位置()不可以省略
       let fun6=(x,y)=>console.log(x,y);
       fun6(20,30);
    	
 //函数体的情况：
    //1.函数体只有一条语句或表达式的时候, 函数体可以加{},也可以不加；
    //若{}省略时===》会自动返回语句执行的结果或表达式的结果；
    //若{}没有省略===》则要加return去返回；
      let funn=()=>console.log("我是箭头函数funn");
      let funn2=()=>{  console.log("我是箭头函数funn2");  };
      funn();
      funn2();
      let funn3=(x,y)=>x+y;        //会将表达式自动返回；
      console.log(funn3(30,50));   //80
    
    //2.函数体不止一条语句或者表达式的情况；  {}不能省略；    
       let funn4=(x,y)=>{ 
            console.log(x,y);
            return x+y;         //加上{ }后，要加return来返回；
       }
       funn4(250,520);
       console.log(funn4(250,520)); 
 </script>

3.箭头函数的特点

1.简洁
2.箭头函数this的特点 *

* 箭头函数中的this，不是在调用它的时候决定的，而是在定义时所处的对象就是它的this；
* 扩展理解：  (判断箭头函数的this)
    1.看箭头函数外层是否有函数
    2.如果有，则箭头函数的this和外层函数指向相同。
        (若外层也是箭头函数，则再往外层去找)
    3.如果没有，则this指向window    

    <button id="btn1">测试箭头函数this1</button>   
    <button id="btn2">测试箭头函数this2</button> 
    <button id="btn3">测试箭头函数this3</button>   
    <button id="btn4">测试箭头函数this4</button>
    <script type="text/javascript">
    	let btn1=document.getElementById("btn1");
    	let btn2=document.getElementById("btn2");
    	btn1.onclick=function(){
    		alert(this);        //btn1来调用onclick，this在函数内
    	}                       //this指向btn1
    	btn2.onclick=()=>{          
    		alert(this);      //this指向window
    	}
    //理解1：这个箭头函数在定义时，不是在某个对象中，而是在window大环境下定义的，所以指向window
    //理解2：看箭头函数外层有没有函数，没有函数，则箭头函数的this就是指向window；
    	
    	let btn3=document.getElementById("btn3");    	
    	let obj={
    		 name:"kobe",
    		 getName:function(){
    		 	btn3.onclick=()=>{
    		     alert(this);        //此时箭头函数外有一个函数
       	        }
    		 } 
    	}
       obj.getName();  
       //外层函数的this指向obj，所以箭头函数的this也指向obj
           
       let btn4=document.getElementById("btn4");
       let obj2={
    		 name:"kobe",
    		 getName:()=>{
    		 	btn4.onclick=()=>{
    		     alert(this);      //此时箭头函数外有一个函数
       	        }
    		 } 
    	}
       obj2.getName();       //指向window；
       //箭头函数找外面的函数，外面的还是箭头函数，
       //则再找外面的，而外层没有函数了，则指向window
       
       //总结：从箭头函数往外层找，最近层的this指向什么，箭头函数this就指向什么。