This is the fourth day of my participation in the November Gwen Challenge. See details: The last Gwen Challenge 2021.

1. Use of arrow functions

New to ES6 is the use of the arrow => to define function expressions. In many cases, arrow functions are no different from functions created by function expressions, except in the way they are written.

The second part of this article introduces the differences between arrow functions and normal functions.

1. Normal function to arrow function

As shown below, define a function that takes two arguments, a and b, and returns the sum of a and b, using the function keyword.

function getSum(a, b) {
    return a + b;
}
Copy the code

To define this function using the arrow function, you can write it as follows, omitting the function keyword and defining a function with the arrow =>.

const getSum = (a, b) = > {
    return a + b;
};
Copy the code

2. Omit the braces and return

If you define an arrow function that contains only a return statement, you can omit the curly braces {} and return.

As shown below, define the arrow function, written in full.

const getSum = (a, b) = > {
    return a + b;
};
Copy the code

This arrow function has only a return statement inside the function body, so it can be abbreviated by omitting the curly braces {} and return:

const getSum = (a, b) = > a + b;
Copy the code

3. Omit the parentheses

If you define an arrow function that takes only one argument, you can omit the parentheses.

As shown below, the arrow function defined has only one argument, written completely.

const func = (a) = > {
    return a + 2;
};
Copy the code

The parentheses next to the parameters are omitted; the following code is equivalent to the code above.

const func = a= > a + 2;
Copy the code

Note: Parentheses must be used if the function has no arguments or multiple arguments.

2. Differences between arrow functions and ordinary functions

In most cases, arrow functions can be used wherever normal functions can be used, because arrow functions are more concise.

But in some cases, arrow functions are quite different from normal functions.

1. This of the arrow function is this of the parent scope

The following code defines an object obj with a method getThis defined by a normal function, and prints this. Calling obj.getThis() prints out the obj object. This indicates that the this inside the method refers to the object obj.

const obj = {
    name: 'Jack'.getThis() {
        console.log(this); }}; obj.getThis();// {name: 'Jack', getThis: ƒ}
Copy the code

GetThis () in the browser prints the Window. This means that even if you call a method on an obj object, the this inside the method does not refer to obj. Instead, it refers to this in the context in which obj is defined.

const obj = {
    name: 'Jack'.getThis: () = > {
        console.log(this); }}; obj.getThis();// Window
Copy the code

2. Call, apply, and bind cannot change this of the arrow function

The normal getName function prints this.name. Call this to obj, and call getName to print the property name from obj.

const obj = {
    name: 'Jack'};function getName() {
    console.log(this.name);
}
getName.call(obj); // Jack
Copy the code

If you change the function to an arrow function, call will have no effect, and you cannot bind this inside the function to obj, printing undefined.

const obj = {
    name: 'Jack'};const getName = () = > {
    console.log(this.name);
};
getName.call(obj); // undefined
Copy the code

3. Cannot be used as a constructor

Arrow functions cannot be used as constructors. If they are, an error will be reported, as shown in the following code.

const Person = () = > {
    this.name = 'Jack';
};
const usr = new Person(); // Person is not a constructor
Copy the code

4. You can’t use arguments

Inside a normal function, you can use arguments to get the arguments passed in, which is an array-like object:

function func() {
    console.log(arguments);
}
func(1.2.3); // [Arguments] { '0': 1, '1': 2, '2': 3 }
Copy the code

Arrow functions cannot use arguments objects and do not get input arguments.

In browsers, an error is reported if you use arguments objects in arrow functions.

const func = () = > {
    // Browser environment
    console.log(arguments); // arguments is not defined
};
func(1.2.3);
Copy the code

But arrow functions can be in arguments to… The args method gets the input parameters, and the arGS is an array.

const func = (. args) = > {
    console.log(args); // [1, 2, 3]
};
func(1.2.3);
Copy the code

5. Arrow functions do not support new.target

Inside the constructor of a normal function definition, use new.target to return the constructor that constructed the instance.

function Person() {
    this.name = 'Jack';
    console.log(new.target);
}
// point to the constructor
new Person(); // [Function: Person]
Copy the code

In arrow functions, new.target is not supported. In the browser environment, arrow functions using new.target will report an error: new.target expression is not allowed here.

const Person=() = >{
    this.name = 'Jack';
    console.log(new.target);
}
// Browser environment
new Person(); // new.target expression is not allowed here
Copy the code

Reference for this article:

JavaScript Advanced Programming (Version 4)