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:
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: This is obviously an implicit binding, and fun1's this points to 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 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). f2() is executed, and the rebound this——window is printed out, and then the arrow function is returned and assigned to f2_2f 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 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); } } }, SummarizeThis 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:
|
<<: 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)
Click here to return to the 123WORDPRESS.COM HTML ...
Table of contents The pitfalls Filling method Wha...
Win10 installation (skip if already installed) Fo...
This article example shares the specific code of ...
When the scale of Docker deployment becomes large...
1. Sometimes we use ES Due to limited resources o...
Why should we use CSS animation to replace JS ani...
Maybe everyone knows that js execution will block...
Xiaobai learned about Vue, then learned about web...
Deploy nginx with docker, it's so simple Just...
Table of contents Preface && Operator || ...
Table of contents 1. Declare a function 2. Callin...
Previous words Line-height, font-size, and vertica...
I encountered a small problem today and struggled ...
Preface 1. This article uses MySQL 8.0 version Co...