Detailed explanation of this pointing of JS arrow function

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

Some points to note when using arrow functions:

Arrow function cannot be used as a constructor, if used, an error will be thrown.
Cannot use arguments parameter, if you want to use it, use rest
The yield command cannot be used, so the arrow function cannot be used as the Generator function
Because there is no such thing as this, it is impossible to change this pointing through bind, call, or apply
But this does not mean that the arrow function's this pointing is static. We can control it by changing the this pointing of its outer code base
This of the arrow function is inherited from the outer code base, so this of the arrow function is bound when defined, while an ordinary function determines this point to when called.
This is the arrow function directly defined in the literal object does not bind the object, but looks for a layer outward. The simplest case is to bind to window

PS: In actual development environment, React can use arrow functions to solve a classic problem, which I will not go into details here.

Let's give an example to see the actual situation of the arrow function:

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

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

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

obj.fun3(); // window

Analysis of output for each line:

let f1 = obj.fun1() // obj

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

f1() // obj

Here we execute the arrow function returned from the previous line. We analyze this in the previous layer of the code base pointing to obj, so we inherit directly, and the arrow function this pointing to

objlet f2 =obj.fun2()

When the first layer of fun2 was executed, the code was not printed, but a function was returned and assigned to f2, and a binding loss occurred here. This pointing to the original obj point to the window (the assignment occurred)

let f2_2 = f2() // window

f2() is executed, and this - window after the modified binding is printed, and then the arrow function is returned and the value is assigned to f2_2f

2_2() // window

Execute the window to print it. Didn’t this in the outer code point to window? So here we inherit window as this

obj.fun3() // window

The arrow function directly defined in the literal cannot inherit this from the object. Instead, it looks for another layer and finds the window, because the literal object cannot form its own layer scope, but the constructor can.

Then how do we manipulate this pointing of the arrow function:

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

Based on the above code:

let fun4 = (obj)() // obj
fun4() // obj

We found that what we modified is this pointing of the second layer method, and the arrow function is also inherited.

  fun2: function () {
    return function () { // What we modified is this      (this);
      return () =&gt; { // Then it's inherited when it is defined here        (this);
      }
    }
  },

Summarize

That’s all for this article. I hope it can help you, and I hope you can pay more attention to more of my content!