This is my 11th day of the Genwen Challenge

When I was watching Vue2.0 before, I was troubled by a lot of arrow functions and had no idea what was going on. Although the word arrow function kept circling in my ear, it was time to record it.

1. Declaration of functions in ES5

console.log(sum(4.5)) / / 9

function sum(x,y){
    return x + y
}


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

Code note: The main difference between the two approaches is that there is no variable promotion when the let keyword is used to declare functions.

Arrow functions in ES6

The main thing is to get rid of function and use arrows between 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

3. Differences between arrow functions and normal functions

1. This refers to the object of the definition, not the object of the call (arrow function does 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(() = > { // ** arrow function does not have this**,this refers to the parent this
                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

3. Arguments objects cannot be used

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