Detailed explanation of JavaScript arrow function

This article explains in detail the basic knowledge of arrows in ES6Function(Arrow Functions) from a beginner's perspective. ES6 can use "arrows" to define functions. , note that it is a function, do not use this way to define a class (constructor) 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, the brackets can be omitted:

parameters => { statements }

If the return value is only one

expression

(expression), you can also omit the curly brackets: parameters => expression
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">// 等价于: function (parameters){ return expression; }</pre><div class="contentsignin">Copy after login</div></div>Now that you have learned the syntax of arrow functions, let’s practice it. Open the

Chr

ome browser developer console and enter:

var double = num => num * 2

We bind the

variable

double to an arrow function, which has one parameter num, returns num * 2. Call this function:

double(2);
// 4

double(3);
// 6

No local this binding

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 Assign a value 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

set

Interval() 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 an accumulated number. What went wrong?

First use the following statement to stop the continuous execution of the setInterval function:

clearInterval(b.timer);<a href="http://www.php.cn/wiki/917.html" target="_blank"></a>Let’s try to understand Why the error occurred: According to the rules explained in the previous blog, first of all, the function setInterval was not called by a declared object, and the new keyword was not used. Secondly, bind, c

all

and apply were 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 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 expected, the printed value is true every time. Finally, end the printing of the screen:

clearInterval(b.timer);

Summary

1. Write code for arrow function More concise syntax;

2. This will not be bound.

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