Comprehension ES6 reading: function (Functions) (iv) Arrow Functions

Arrow function (Arrows Functions)

As the name says, the arrow function uses arrows (= =) to define the function. The arrow functions behave differently in many places than traditional functions.

Arrows function syntax (arrow functions Syntax)

There are several ways to implement the arrow functions. For example, you want to implement a function that has only one parameter and returns the value of this parameter directly:

let reflect = value = value ; //equivalent the following function  function(value) {    return  value;};

In the above example, the function has only one parameter, so it is possible to use No (). If you have more than one parameter, you need to wrap the parameter in ():

num2; // equivalent to the following function  function(NUM1, num2) {    return num1 + num2;};

In addition, if the function has no parameters, () is also required:

Let GetName = () = "Zakas"; // equivalent to the following function  function() {    return "Zakas";};

If the function body contains multiple expressions, you need to enclose the function body with {}:

Let sum = (NUM1, num2) = {    = num1 + 3;     return NUM1 + num2;}; // equivalent to the following function  function(NUM1, num2) {    = num1 + 3;     return NUM1 + num2;};

In fact, you can see that the arrow function can be directly according to (parameter) = = {function body} way to write it. The above example is just to say that the arrow functions can be abbreviated in some cases.

So what is the difference between an arrow function and a traditional function other than syntax?

1. No this, super, argument and New.target bindings

The values of this, super, argument, and New.target are determined by the non-arrow functions that contain the arrowhead function in the inner layer. First look at arugments bindings:

functionouter (NUM1, num2) {return function () {        returnArguments[0]; }}let Inner= Outer (1, 2); Console.log (Inner (3));//3----------------------------------------------------------functionouter (NUM1, num2) {return() = {        returnArguments[0]; }}let Inner= Outer (1, 2); Console.log (Inner (3));//1

The arrow function itself has no arguments object, and actually accesses the arguments object of the outer outer function, so the output is 1. However, the parameters of the function can be accessed using the remaining parameters in the arrow function.

In JavaScript, the This binding is a more complex mechanism because the value of this point is not determined until it is actually executed, and it is not necessarily the value that is pointed to when it is defined. There is no this binding in the arrow function, which means that the value of this is determined when the function is defined and does not change the value when it is actually executed. Take a look at an example:

function foo () {    return () = {        returnthis. A;    }} var obj1 = {a:2}; var obj2 = {a:3}; var bar = Foo.call (obj1); Console.log (Bar.call (OBJ2));   //   2

In the above code, when bar is created, this is bound to obj1, and then when executed, the value of this is not re-bound to obj2, so output 2. If the function inside is a traditional function, then output 3.

New.target and super are the standards introduced by ES6 and are explained later.

2, no prototype, cannot be called by new

let foo = () = {};console.log (foo.prototype);   //   undefinednew foo ();  // Typeerror:foo is not   a constructor

3. Duplicate named parameters are not allowed

Either the strict mode or the not-strict mode, the arrow functions do not allow duplicate named arguments:

Let sum = (NUM1, num2, num1) + = {  //  syntaxerror:duplicate parameter name not allowed in thi s context    NUM1 = num1 + 3;     return NUM1 + num2;};

Comprehension ES6 reading: function (Functions) (iv) Arrow Functions