Es6 arrow functions

1. Ordinary functions

1. First, let's talk about the use of ordinary function s

1.1 When we want to define a function, there are two ways to define a function (function function name () {}) (var function name = function () {}). For example, the following code defines fn1, fn2

            
      var a=10;
      function fn1(){
        console.log(a);
      } ;
      var fn2=function(){
        console.log(a);
      } ;

1.2 The difference between the two definitions

The first method has function promotion, and the second method has no function promotion. We can put the following two pieces of code into the script tag. When running, we will find that the first output is undefined, and the second one will report an error; so the second method way will not have function hoisting

           
      fn1();
    
      var a=10;
      function fn1(){
        console.log(a);
      } ;
           
      fn2();
    
      var a=10;
      var fn2=function(){
        console.log(a);
      } ;

1.3 this in a normal function points to 1

We enter such a piece of code in the script tag, the this output of our console is window, then who will this point to when we set a function in the object

    <script>
            
    
    
      var a=10;
      function fn1(){
        console.log(a);
        console.log(this);
      } ;
      var fn2=function(){
        console.log(a);
        console.log(this);
      } ;
       fn2();
       fn1();


    </script>

1.4 this in ordinary functions points to 2

We define a function in an object, use this function to output this, the following code segment, after we execute the output is the obj object, indicating that this points to this object at this time, so in ordinary functions our this will point outside the function The first parent class of .

var obj={
   fn(abc){
    console.log(this);
}
}
obj.fn(123);

1.5 The this point of the timer, the function we defined in the timer outputs this, when we click the button, the timer is triggered, and the console output is window

<body>
 <button id="add">Click to trigger</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            setInterval(function(){
      console.log(this);
    },1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   ;
  

    </script>

</body>

1.6 What happens when we put the method of the timer into the object to call, when we call the timer by calling the method under the object this time, what is the output of this, it is still windows

<body>
 <button id="add">Click to trigger</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    fun(){
    setInterval(function(){
      console.log(this);
    },1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

The arrow function

1. The usage of arrow functions

The basic use of arrow functions, the empty number is filled with parameters, if there is only one parameter, the parentheses can be omitted,

()=>{};

2. The naming, definition and use of arrow functions;

     var fn2 = () => {
            console.log(11);
        }
        fn2();

3. Arrow functions do not have function promotion and must be defined before they can be called;

4. this in arrow function (** key point): this in arrow function will only find the parent element of and, only follow this, if the upper level is still an arrow function, then continue to look up. So what is important is that if we define an arrow function in an object to use the timer to output this, then the value of zhegethis is this object, that is, the output of the following code is obj;

(We used two timers in the fun function, one for the function function and one for the arrow function. The this output of the arrow function is the obj object, and the other output is the window)

<body>
 <button id="add">Click to trigger</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    a:12,
    fun(){
    setInterval(int=>{console.log(this);},1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

5. We also changed the above code fun to an arrow function. The outputs of the two timers are both window s, but the two this search methods are different. One is that the upper level of the arrow function is still an arrow function. window, and the timer this in the function in the function in another timer points directly to the window

 <button id="add">Click to trigger</button>

    <script>
         var add=document.getElementById("add");
         add.onclick=function(){
            obj.fun();
         }   ;
  var obj={
    a:12,
    fun:()=>{
    setInterval(int=>{console.log(this);},1000);
    setTimeout(function(){
    console.log(this);
    },1000);
         }   
  }

    </script>

</body>

6. Arrow functions cannot be new and cannot be used as constructors

7. There is no argument (with rest) in the arrow function;

Tags: Front-end ECMAScript

Posted by kevin1 on Tue, 13 Sep 2022 21:23:09 +0300