Detailed explanation of JavaScript arrow function (graphic tutorial)

This article explains in detail the basic knowledge of Arrow Functions in Javascript ES6 from a beginner's perspective. ES6 can use "arrows" to define functions. Note that they are functions. Do not use this method to define classes (constructors). )

In order to ensure readability, this article uses free translation rather than literal translation. In addition, the copyright of this article belongs to the original author, and the translation is for learning only.

In this article we introduce the advantages of the arrow function.

More concise syntax

Let’s first define the function according to the conventional syntax:

function funcName(params) {
  return params + 2;
 }
funcName(2);
// 4

This function uses arrow functions and can be done with just one line of code!

var funcName = (params) => params + 2
funcName(2);
// 4

Isn’t it cool! Although it is an extremely concise example, it well illustrates the advantages of arrow functions when writing code. Let's take a closer look at the syntax of arrow functions:
(parameters) => { statements }

If there are no parameters, it can be further simplified:
() => { statements }

If there is only one parameter, you can omit the parentheses:
parameters => { statements }

If the return value is only There is only one expression (expression), and you can omit the curly brackets:
parameters => expression

// 等价于:
function (parameters){
 return expression;
}

Now that you have learned the syntax of arrow functions, let’s practice it. Open the Chrome browser developer console and enter:
var double = num => num * 2

We bind the variable double to an arrow function, which has A parameter num, returns num * 2. Call this function:

double(2);
// 4

double(3);
// 6

No binding of local this

Unlike ordinary functions, arrow functions do not bind this. In other words, the arrow function will not change the original binding of this.

We use an example to illustrate:

function Counter() {
 this.num = 0;
}
var a = new Counter();

Because the keyword new construct is used, this in the Count() function is bound to a new object and assigned to a. Print through console.log

a.num ，会输出0。 
console.log(a.num);
// 0

If we want to increase the value of a.num by 1 every second, how to achieve it? You can use the setInterval() function.

function Counter() {
 this.num = 0;
 this.timer = setInterval(function add() {
  this.num++;
  console.log(this.num);
 }, 1000);
}

Let’s take a look at the output:

var b = new Counter();
// NaN
// NaN
// NaN
// ...

You will find that a NaN is printed every second instead of the accumulated number. What went wrong?

First use the following statement to stop the continuous execution of the setInterval function:
clearInterval(b.timer);

Let’s try to understand why the error occurred: According to the previous article The rules explained in the blog are that first of all, the function setInterval is not called by a declared object, nor is the new keyword used, and secondly, bind, call and apply are not used. setInterval is just a normal function. In fact, this in setInterval is bound to the global object. We can verify this by printing this:

function Counter() {
 this.num = 0;
this.timer = setInterval(function add() {
  console.log(this);
 }, 1000);
}
var b = new Counter();

You will find that the entire window object is printed. Use the following command to stop printing:
clearInterval(b.timer);

Go back to the previous function. The reason why NaN is printed is because this.num is bound to the window object. num , while window.num is undefined.

So, how do we solve this problem? Use arrow functions! Using arrow functions will not cause this to be bound to the global object.

function Counter() {
 this.num = 0;
 this.timer = setInterval(() => {
  this.num++;
  console.log(this.num);
 }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

This bound through the Counter constructor will be retained. In the setInterval function, this still points to our newly created b object.

In order to verify what we just said, we can bind this in the Counter function to that, and then determine whether this and that are the same in setInterval.

function Counter() {
 var that = this;
 this.timer = setInterval(() => {
  console.log(this === that);
 }, 1000);
}
var b = new Counter();
// true
// true
// ...

As we expect, the printed value is true every time. Finally, end the printing of the screen refresh:
clearInterval(b.timer);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue.jsDetailed explanation of calculation and use of listener properties

Summary of three ways to dynamically load JS files

jsSummary of cross-domain methods that support post requests

The above is the detailed content of Detailed explanation of JavaScript arrow function (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!