1. The basic use of arrow functions

• The arrow function is a function of the following form

const func = (paramList) => {
    
    //  The body of the function 
}

• According to custom , There are not many cases where the arrow function is used as a single function , The arrow function is often used when the parameter to be passed in is a function

//  For example, event handler 
elem.addEventListener("click", () => {
    
    //  The body of the function 
})

• There is only one line of code in the function code block

  // const mul = (num1, num2) => {
    
  // return num1 + num2
  // }
  const mul = (num1, num2) => num1 * num2
  console.log(mul(20, 30));

2. In the arrow function this The direction of

2. 1 Analysis of a

• We often use function keywords function To declare a function , In a function() in ,this Always points to the object that calls this function . But the arrow function is this The point is a little special , It always points to... In the nearest outer scope this Referred object

  <button id="a"> Ordinary function function </button>
    <button id="b"> Use arrow function to construct event handling function </button>
    <script>
        const a = document.querySelector("#a");
        const b = document.querySelector("#b");
        //  Here are two click events , A bound event handler is a normal function , An arrow function 

        a.addEventListener("click", function() {
    
            console.log(this);
        });

        b.addEventListener("click", () => {
    
            console.log(this);
        });
    </script>

});

You can see from the print result of the console ：

Of event handling functions constructed by ordinary functions this It refers to the event source object （button）

In the event handler function constructed by arrow function this It points to... In the scope of its nearest outer function this Point to the Window object

2. 2 Analysis of the two

const obj = {
    
    a() {
    
        setTimeout(function() {
    
            console.log(this);
        })
    },
    b() {
    
        setTimeout(() => {
    
            console.log(this);
        })
    }
}
obj.a(); //  Print out  Window
obj.b(); //  Print out   The current object obj

• This time, function In the constructed function this Points to the window object , And in the arrow function this Points to the nearest In the scope of the outer function this Object to point to obj
  

• problem : In the arrow function this How to find it ?

  • answer : To the outer scope , Layer by layer search this, Until there is this The definition of .

   const obj = {
    
        aaa() {
    
            setTimeout(function() {
    

                setTimeout(function() {
    
                    console.log(this); // window
                })

                setTimeout(() => {
    
                        console.log(this); // window
                    }
                )
            })
            setTimeout(() => {
    
                setTimeout(function() {
    
                    console.log(this); // window
                })
                setTimeout(() => {
    
                    console.log(this); // obj
                })
                console.log(this); //obj
           })
        }
    }
    obj.aaa()

2. 3 this Point to detailed parsing （ Arrow function ）