OK, the arrow function this is summed up in one sentence: the arrow function this refers to this at definition, not this at execution.

If the above sentence is understood not understand or do not understand at all, it does not matter, there will be cases to explain.

Take a chestnut

Take a look at a use case for this:

// Define an object var obj = {x:100, // attribute xshow(){// Delay 500 ms, output the value of xsetTimeout(// Anonymous functionfunction(){console.log(this.x); }, 500); }}; obj.show(); // Print result: undefinedCopy the code

In our case, our obj object has a property x and a property show() method (using a concise representation of objects, as explained in Section 9), and show() prints the value of x through this. But after the last line of code is executed, we print undefined. Why is that? Isn’t the value of x 100?

Yes, x is 100, but there is a problem with this. When setTimeout() is executed, this becomes a window object (setTimeout() is a window object), not an obj object. X = obj. X; x = window.x; x = obj. X;

We can use some ES5 knowledge to get around this trick subtly, but today we’ll focus on the arrow functions of ES6.

Enter the arrow function

If you write the same code using the arrow function, you get a different this.x. Let’s try it:

// Define an object var obj = {x:100,// attribute xshow(){// Delay 500 ms, output the value of xsetTimeout(// different: arrow function () => {console.log(this.x)}, 500); }}; obj.show(); // Print the result: 100Copy the code

The only difference is that setTimeout replaces the anonymous function with an arrow function, so you can scroll up and see the difference between the two pieces of code. Also, the big difference is printing the result, and this code, written with the arrow function, successfully prints the result we want: 100.

Why is that? As summarized in paragraph 3 of the article:

This in the arrow function refers to this at definition, not this at execution

When we define the show() method of obj, we write this.x in the arrow function, where this refers to obj, so this.x refers to obj.x. When show() is called, this still refers to the object to which it was defined, which is obj, so it prints: 100.

Above is the arrow function in this pointing to the problem explained! If it is a little round, you can watch it again, look slower, learn faster!

Thank you again for the reminder of “Line breaker” and “Better”, and hope that more children will participate in the interaction like them, and learn and progress together. No matter what stage you are in, we welcome you here.

Make up a missed lesson summary

Ps: This of the arrow function refers to this at definition, not this at execution.

Please pay attention to my column for more front-end learning content and articles.

Ali factory standard Web front end senior engineer tutorial directory, from the basic to the advanced, look to ensure that your salary rises a step

Here I have prepared a lot of learning materials for you

That’s the only thing that separates you from Ali engineers