Detailed explanation of this pointing in JS arrow function

Arrow function is a new feature in ES6. It does not have its own this. Its this point is inherited from the outer code base.

There are a few things to keep in mind when using arrow functions:

• Arrow functions cannot be used as constructors and will throw an error if used
• The arguments parameter cannot be used. If you want to use it, use rest
• The yield command cannot be used, so arrow functions cannot be used as Generator functions
• Because it does not have its own this, it is impossible to change the this pointer through bind, call, and apply.
• But this does not mean that the this pointer of the arrow function is static. We can control it by changing the this pointer of its outer code library.
• The this of the arrow function is inherited from the outer code base, so the this of the arrow function is bound when it is defined, while the this of the ordinary function is determined when it is called.
• The this of the arrow function defined directly in the literal object is not bound to the object, but looks outward. The simplest case is to bind to window

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

Let’s take an example to see arrow functions in action:

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 of each line of output:

let f1 = obj.fun1() // obj

This is obviously an implicit binding, and fun1's this points to obj

f1() // obj

The arrow function returned by the previous line is executed here. We analyze that this in the previous code base points to obj, so it is directly inherited and the arrow function this points to

objlet f2 =obj.fun2()

When fun2 is executed at the first level, no code is printed. Instead, a function is returned and assigned to f2. Binding loss occurs here, and this points to window instead of the original obj (assignment occurs).

let f2_2 = f2() // window

f2() is executed, and the rebound this——window is printed out, and then the arrow function is returned and assigned to f2_2f

2_2() // window

Execute and print out window. Doesn’t the this in the outer code just now point to window? So here it inherits window as this

obj.fun3() // window

The arrow function defined directly in the literal cannot inherit the this of the object, but looks one layer outward and finds window, because the literal object cannot form its own scope, but the constructor can.

So how do we manipulate the this pointer of the arrow function?

The answer is to change the this pointer of the outer code base, and change the direction of this before defining the arrow function.

Based on the above code:

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

We found that the this pointer of the second-level method was modified, and the arrow function was also inherited.

  fun2: function () {
    return function () { // We modify this here
      console.log(this);
      return () => { // Then when it is defined here, it will be inherited console.log(this);
      }
    }
  },

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!