Introduction to the usage of JavaScript arrow functions-JS Tutorial-php.cn

Introduction to the usage of JavaScript arrow functions

巴扎黑

Release： 2017-08-16 11:05:25

Original

3020 people have browsed it

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

Copy after login

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

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

Copy after login

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 deeper look at the syntax of arrow functions: [code ](parameters) => { statements }[/code]
If there are no parameters, it can be further simplified:

() => { statements }

Copy after login

If there is only one parameter, you can omit the brackets:

parameters => { statements }

Copy after login

If the return value is only one expression (expression), you can also omit the braces:

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

Copy after login

Now that you have learned the syntax of arrow functions, let’s put it into practice. Open the Chrome browser developer console and enter:

var double = num => num * 2

Copy after login

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

double(2);
// 4
 
double(3);
// 6

Copy after login

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();

Copy after login

Because the keyword new construct is used, this in the Count() function is bound to a new Object and assigned to a. Printing a.num through console.log will output 0.

console.log(a.num);
// 0

Copy after login

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);
}

Copy after login

Let’s take a look at the output:

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

Copy after login

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);

Copy after login

Let’s try to understand why the error occurred: According to the rules explained in the previous blog, first of all, the function setInterval is not used by a declared object When calling, the new keyword is not used, and 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();

Copy after login

You will find that the entire window object is printed. Use the following command to stop printing:

clearInterval(b.timer);

Copy after login

Back to the previous function, the reason why NaN is printed is because this.num is bound to the num of the window object, and window.num Not defined.

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
// ...

Copy after login

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
// ...

Copy after login

As we expected, the printed value is true every time. Finally, end the printing of the screen:

clearInterval(b.timer);

Copy after login

Summary

The above is the detailed content of Introduction to the usage of JavaScript arrow functions. For more information, please follow other related articles on the PHP Chinese website!