Detailed Explanation of this Direction of JS Arrow Function

The arrow function is a new feature in ES6. It does not have its own this, but its this points to inheritance from the outer code base.

Note the following points when using the arrow function:

Arrow function cannot be used as constructor, if used, 1 error will be thrown Unable to use arguments parameter, use rest if you want to use it The yield command cannot be used, so the arrow function cannot be used as the Generator function Because there is no this of its own, it is impossible to change the direction of this through bind, call and apply However, this does not mean that the this orientation of the arrow function is static, and we can control it by changing the this orientation of its outer code base The this of the arrow function inherits from the outer code base, so the this of the arrow function is bound when it is defined, while the ordinary function determines that the this points to when it is called The this of the arrow function directly defined in the literal object does not bind to the object, but looks out for 1 layer, and the simplest case is to bind to window

PS: In the actual development environment, React can use the arrow function to solve a classic problem, which will not be described in detail here.

Give an example to see the actual situation of the 1 down arrow function:

const obj = {
  fun1: function () {
    console.log(this);
    return () => {
      console.log(this);
    }
  },
  fun2: function () {
    return function () {
      console.log(this);
      return () => {
        console.log(this);
      }
    }
  },
  fun3: () => {
    console.log(this);
  }
}

let f1 = obj.fun1(); // obj
f1() // obj

let f2 = obj.fun2();
let f2_2 = f2(); // window
f2_2() // window

obj.fun3(); // window

Analysis for each line of output:

let f1 = obj.fun1() // obj

What is obvious here is implicit binding, and this of fun1 points to obj

f1() // obj

Here, the arrow function returned from the previous line is executed. We analyze that this of the previous layer code base points to obj, so we inherit it directly, and the arrow function this points to

objlet f2 =obj.fun2()

fun2 Layer 1 executes without printing code, but returns a function that is assigned to f2, where a loss of binding occurs, and this points to window from the original obj (an assignment occurs)

let f2_2 = f2() // window

f2 () executes, prints out the modified this-window, then returns the arrow function and assigns the value to f2_2f

2_2() // window

Execute print out window. Isn't this of outer layer code pointing to window, so window is inherited as this

obj.fun3() // window

The arrow function directly defined in the literal quantity cannot inherit the this of the object, but finds window by looking for another layer, because the literal quantity object cannot form its own 1-layer scope, but the constructor can.

So how do we manipulate the this direction of the arrow function:

The answer is to modify the this direction of the outer code base, and modify the direction of this before the arrow function is defined.

Based on the above code:

let fun4 = f2.bind(obj)() // obj
fun4() // obj

We found that the this pointing of the Layer 2 method was modified, and the arrow function was inherited.

  fun2: function () {
    return function () { //  What we modified is here this
      console.log(this);
      return () => { //  Then it is inherited when it is defined here 
        console.log(this);
      }
    }
  },

Summarize

This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!