Before, when I was watching Vue2.0, I was troubled by a lot of arrow functions, and I had no idea what was going on. Although the word arrow function kept circling in my ear, today I will sort out the common usage and expression of arrow functions. In the coming of Vue3.0, Hope we can also ride the arrow function of the wind to fly. You can also follow my wechat public number, Snail Quanzhan.

Function declaration in ES5

function sum(x,y){
    return x + y
}
console.log(sum(4.5)) / / 9

let sum = function(x,y){
    return x + y
}
console.log(sum(4.5)) / / 9
Copy the code

For the above two methods, the main difference lies in that there is no problem of variable promotion when the let keyword is used to declare functions (PS: For details, please refer to the first article of small editor, the difference between the keyword let and var).

Arrow functions in ES6: function is removed and arrows are used to separate parameters and function bodies

let sum = (x,y) = > {
    return x+y
}
console.log(sum(3.4)) / / 7
Copy the code

When there is only one line of code for the function body, the above code can be simplified to the following code

let sum = (x,y) = > x + y
Copy the code

For return values, the return keyword can be omitted and expanded with parentheses

function addStr(str1,str2){
    return str1+str2
}

const addStr = (str1,str2) = > (str1+str2)


// The above two functions have the same function, except that the arrow function is on the right side of the arrow, omits the keyword return, and adds parentheses around it
Copy the code

The difference between arrow functions and ordinary functions

1. This refers to the object on which it was defined, not the object on which it was called (arrow functions do not have this,this refers to the parent this).

<html>
  <body>
    <button id="btn">Am I</button>
    <script>
      let oBtn = document.querySelector("#btn")
        oBtn.addEventListener("click".function(){
            console.log(this) 
        })
    </script>
  </body>
</html>
Copy the code
<html>
  <body>
    <button id="btn">Am I</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click".function(){
            setTimeout(function(){
                // call apply bind to change this pointer
               console.log(this) // Window
            },1000)})</script>
  </body>
</html>
Copy the code

Change the this point by using bind

<html>
  <body>
    <button id="btn">Am I</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click".function(){
            setTimeout(function(){
                console.log(this) 
            }.bind(this),1000)})</script>
  </body>
</html>
Copy the code

The this in the arrow function points to

<html>
  <body>
    <button id="btn">Am I</button>
    <script>
      let oBtn = document.querySelector("#btn")
      oBtn.addEventListener("click".function(){
            setTimeout(() = > {
                console.log(this) 
            },1000)})</script>
  </body>
</html>
Copy the code

2. Cannot be used as a constructor

function People(name,age){
    console.log(this) // People{}
    this.name = name
    this.age = age
}

let p1 = People("lilei".34)
console.log(p1) // People{name:"lilei",age:34}
let People = (name,age) = > {
    this.name = name
    this.age = age
}

let p1 = People("lilei".34)
console.log(p1) People is not a constrator
Copy the code

You can’t use arguments objects

let foo = function(){
    console.log(arguments)}console.log(foo(1.2.3)) / / the Arguments [1, 2, 3]

let foo = () = > {
    console.log(arguments)}console.log(foo(1.2.3)) // Arguments is not defined
Copy the code

Arrow functions are compatible with objects similar to es5: with rest arguments

let foo = (. args) = > {
    console.log(args)
}
console.log(foo(1.2.3)) / / [1, 2, 3]
Copy the code