Detailed explanation of this pointing in JS arrow function

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!

You may also be interested in:
  • Detailed explanation of JavaScript function this pointing problem
  • Detailed explanation of the this pointing problem of JavaScript prototype objects
  • Detailed explanation of this reference and custom properties in JavaScript
  • The this keyword in JavaScript refers to

<<:  How to use Navicat to operate MySQL

>>:  CSS3 implements footer fixed at the bottom (always at the bottom no matter how high the page is)

Recommend

Vue implements upload component

Table of contents 1. Introduction 2. Ideas Two wa...

MySQL paging query optimization techniques

In applications with paging queries, queries that...

HTML css js implements Tab page sample code

Copy code The code is as follows: <html xmlns=...

AsyncHooks asynchronous life cycle in Node8

Async Hooks is a new feature of Node8. It provide...

How to deploy your first application with Docker

In the previous article, you have installed Docke...

What you need to know about responsive design

Responsive design is to perform corresponding ope...

JavaScript to implement random roll call web page

JavaScript writes a random roll call webpage for ...

Let's talk about the two functions of try catch in Javascript

The program is executed sequentially from top to ...

mysql 8.0.15 winx64 decompression version graphic installation tutorial

Every time after installing the system, I have to...

Using Apache ab to perform http performance testing

Mac comes with Apache environment Open Terminal a...