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)
Table of contents 1. Introduction 2. Ideas Two wa...
In applications with paging queries, queries that...
This article is intended to be a starting point f...
Copy code The code is as follows: <html xmlns=...
Async Hooks is a new feature of Node8. It provide...
In the previous article, you have installed Docke...
Web page WB.ExecWB control printing method Copy c...
Responsive design is to perform corresponding ope...
JavaScript writes a random roll call webpage for ...
question: The commonly used command "ll"...
Demand background: Insert GIF dynamic images into...
The program is executed sequentially from top to ...
Every time after installing the system, I have to...
Mac comes with Apache environment Open Terminal a...
Inserting Data insert into table name (column nam...