What is the difference between arrow functions and ordinary functions in js

Difference: The arrow function is "=>", and the ordinary function is "function". Arrow functions cannot be used as constructors and new cannot be used. Arrow functions do not bind arguments, but normal functions do. This in arrow functions represents the upper-level object, and this in ordinary functions represents the current object.

The operating environment of this tutorial: Windows 7 system, ECMAScript version 5, Dell G3 computer.

Ordinary functions are available in es5. Arrow functions are the function forms that appear in es6. Of course, you can continue to use ordinary functions.

Everyone knows the common functions:

The form is basically the same

Let’s take a look at the arrow function:

When developing, it is based on In actual situations, some things can be omitted

Return and {braces} can be omitted for single processing

A single parameter can be omitted (parentheses)

Arrow function It cannot be used as a constructor and cannot be new. An error will be reported

The arrow function does not bind arguments, but you can use...rest parameters

This is a normal function argument, you can use

This is an arrow function, and an error will be reported if used.

But it can be used in this way, but the result is different from arguments. The general usage scenario of

arguments is: 3 parameters are allowed to be passed in, and the middle parameter is optional. If only 1 parameter is passed in, it is used for parameter 1, and if 2 parameters are passed in, it is used for parameter 1 and parameter 3...

rest parameter usage effect:

The default value of rest is [], and extra parameters will be added to the array

Here we use arguments to simulate the rest effect:

Related recommendations: JavaScript video tutorial

The representatives of this of the two functions are different:

f1 is an arrow function, and this represents The upper layer object, if there is no custom upper layer, represents window.

f2 is an ordinary function, and this represents the current object.

The call() or apply() function of the arrow function will not affect the representative object of this:

b, c, and d are all ordinary functions. The f in

b is an arrow function, so the internal this represents the upper layer obj, and the value is 11. The f in c is an arrow function. When calling f's call(), it will not affect the internal this. It still represents obj. The value is 11

. f in d is an ordinary function and this represents window. However, because f's call(m) is called, it becomes Became m, the value is 21

Here we will mention the call function:

The call function is a method that every function has, used to change What this points to inside a normal function.

Arrow functions do not have prototype attributes:

prototype is an ordinary function used to obtain the prototype object.

Summarize:

This in the arrow function points to the upper object, and bind(), call(), and apply() cannot change the direction.

This within a normal function executes the object whose function is called.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of What is the difference between arrow functions and ordinary functions in js. For more information, please follow other related articles on the PHP Chinese website!