ES6---箭頭函數

• 一、基本用法
• 二、箭頭函數的寫法
• • 1. 沒有返回值
  • • （1）不帶參數
    • （2）帶參數
  • 2. 有返回值
  • 3. 對象上的函數es6縮寫
• 三、箭頭函數可以與變量解構結合使用
• 四、箭頭函數簡化回調函數
• 五、rest 參數與箭頭函數
• 六、計時器裏面的箭頭函數的使用
• 七、箭頭函數使用注意點
• 八、箭頭函數不適用場景
• 九、箭頭函數嵌套問題

一、基本用法

• 特點：保證上下文this指針一致
• ES6 允許使用“箭頭”（=>）定義函數。
• 如果箭頭函數不需要參數或需要多個參數，就使用一個圓括號代錶參數部分。

    var f=()=>5;
    console.log(f());//5
    //等同於
    var f=function(){
     return 5;}
    console.log(f());//5
    var sum=(num1,num2)=>num1+num2;
    console.log(sum(1, 2));//3
    //等同於
    var sum=function(num1,num2){
     
        return num1+num2;
    }
    console.log(sum(1, 2));//3

• 如果箭頭函數的代碼塊部分多於一條語句，就要使用大括號將它們括起來，並且使用return語句返回。
• 由於大括號被解釋為代碼塊，所以如果箭頭函數直接返回一個對象，必須在對象外面加上括號，否則會報錯。

    let obj=()=>({
     a:1,b:2});
    console.log(obj());//{a: 1, b: 2}
    let obj=()=>{
     a:1,b:2};
    console.log(obj());//報錯SyntaxError: Unexpected token :

二、箭頭函數的寫法

• 箭頭函數可以分為有返回值和無返回值

1. 沒有返回值

（1）不帶參數

		   //不帶參
           let data = () => {
     

           }

（2）帶參數

			//1個參
           //es5寫法
           let data1 = function(a){
     

           }
           //es6寫法
           let data2 = a => {
     

           }
           //2個參
           //es5寫法
           let data3 = function(a,b){
     

           }
           //es6寫法
           let data2 = (a,b) => {
         

           }

2. 有返回值

           let d1 = () => {
     
               return 123;
           }
           let d2 = () => 123;

• 返回對象

           let d3 = () => ({
     a:1,b:2});
           console.log(d3());
           //但是不能像下面這樣寫，會報錯
           let d3 = () => {
     a:1,b:2};
           console.log(d3());//報錯

3. 對象上的函數es6縮寫

			let stus = {
     
               eat(){
     
                   
               }
           }

三、箭頭函數可以與變量解構結合使用

    const obj={
     first:1,last:2};
    const full=({
      first,last})=>first+' '+last;
    console.log(full(obj));//1 2
    //等同於
    function full(person){
     
        return person.first+' '+person.last;
    }
    console.log(full(obj));//1 2

四、箭頭函數簡化回調函數

    //普通函數
    [1,2,3].map(function(x){
     
        return x*x;
    });
    //箭頭函數
    [1,2,3].map(x=>x*x);

五、rest 參數與箭頭函數

    const numbers= (...nums)=>nums;
    console.log(numbers(1, 2, 3, 4, 5));//[1, 2, 3, 4, 5]
    const a=(head,...tail)=>[head,tail];
    console.log(a(1, 2, 3, 4, 5));//[1,[2,3,4,5]]

六、計時器裏面的箭頭函數的使用

	  let obj = {
     
           sleep:function(){
     
               console.log(this);//sleep
               setTimeout(function(){
     
                   console.log(this);//window
               },1000);
           }
       };
       obj.sleep();

• 計時器裏面的this指針指的是window，那麼怎樣讓this指針指向當前對象呢？

	   let obj = {
     
           sleep:function(){
     
               console.log(this);//sleep
               setTimeout(()=>{
     
                   console.log(this);//sleep
               },1000);
           }
       };
       obj.sleep();

• 可以使用箭頭函數來實現，因為箭頭函數可以保證上下文this指針一致。

七、箭頭函數使用注意點

• （1）箭頭函數沒有自己的this對象。
• （2）不可以當作構造函數，也就是說，不可以對箭頭函數使用new命令，否則會拋出一個錯誤。
• （3）不可以使用arguments對象，該對象在函數體內不存在。如果要用，可以用 rest 參數代替。
• （4）不可以使用yield命令，因此箭頭函數不能用作 Generator 函數。
  對於普通函數來說，內部的this指向函數運行時所在的對象，但是這一點對箭頭函數不成立。它沒有自己的this對象，內部的this就是定義時上層作用域中的this。也就是說，箭頭函數內部的this指向是固定的，相比之下，普通函數的this指向是可變的。

八、箭頭函數不適用場景

• (1)第一個場合是定義對象的方法，且該方法內部包括this。

       let stu = {
     
               sleep:() => {
     
                   console.log(this);//window
               }
           }
           stu.sleep();
       }

• (2)第二個場合是需要動態this的時候，也不應使用箭頭函數。

           var button = document.getElementById('press');
           button.addEventListener('click', () => {
     
               this.classList.toggle('on');
           });

• 上面代碼運行時，點擊按鈕會報錯，因為button的監聽函數是一個箭頭函數，導致裏面的this就是全局對象。如果改成普通函數，this就會動態指向被點擊的按鈕對象。

九、箭頭函數嵌套問題

• 嵌套之後，找最外層的this

    let fun={
     
        sleep(){
     
            console.log(this);//sleep
            return ()=>{
     
                console.log(this);//sleep
            }
        }
    }
    fun.sleep()();