Of Stack

Characteristics of JavaScript arrow function and its difference from ordinary function

  • 2021-12-04 09:16:10
  • OfStack
Directory 1. Use of arrow function 1. Normal function to arrow function 2. Omit braces and return3. Omit braces 2. Difference between arrow function and normal function 1. this of arrow function is this2 of parent scope. call, apply, bind cannot change this3 of arrow function. Can't be used as constructor 4. Can't use arguments5. Arrow function does not support new. target

1. Use of arrow functions

Use arrow added in ES6 => To define the method of function expression. In many cases, there is no difference between arrow functions and functions created by function expressions, only differences in writing.

The second part of this article will introduce the functional differences between arrow functions and ordinary functions.

1. Normal function to arrow function

As shown below, define a function that can be used function Keyword, the function takes two arguments a And b , return a And b The and. 


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

If you use the arrow function to define this function, you can write it in the following form, omitting it function Keyword, using the arrow => Define 1 function. 


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

2. Omit braces and return

If the arrow function is defined, the function body only has return Statement, you can omit the curly braces {} And return .

As shown below, the arrow function is defined in full. 


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

The function body of this arrow function has only return Statement, then, the braces are omitted {} And return After that, the simplified wording is as follows: 


const getSum = (a, b) => a + b;

3. Omit the brackets

If the arrow function is defined with only one parameter, the parentheses can be omitted.

As shown below, the defined arrow function has only 1 parameter, which is completely written. 


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

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


const func = a => a + 2;

Note: If the function has no parameters or multiple parameters, parentheses must be used.

2. The difference between arrow function and ordinary function

In most cases, arrow functions can be used instead of ordinary functions, because arrow functions are simpler.

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

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

The following code defines 1 object function4 The object has a method defined by a common function function5 Print out the function6 . Call function7 , will print out function4 Object. This shows that the internal of the method function6 Point to an object function4 . 


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

Also define 1 object function4 But the method inside is defined by the arrow function and called in the browser function7 But print it out a3 Which means that even if you call the function4 Object, the method inside the method function6 It won't point to function4 Instead, point to the definition function4 Of the context of function6 . 


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

2. call, apply, bind cannot change this of arrow function

The following code, ordinary function a9 Print b0 , through b1 In the function function6 Bind to function4 On the body, call a9 Print out function4 Attributes on the body name . 


const obj = {
    name: 'Jack',
};

function getName() {
    console.log(this.name);
}
getName.call(obj); // Jack

If you change the function to an arrow function, then b1 Will not work, and the internal of the function cannot be changed function6 Bind to function4 , print out undefined . 


const obj = {
    name: 'Jack',
};

const getName = () => {
    console.log(this.name);
};
getName.call(obj); // undefined

3. Cannot be used as a constructor

The arrow function cannot be used as a constructor. If the arrow function is used as a constructor, an error will be reported, as shown in the following code. 


const getSum = (a, b) => {
    return a + b;
};
0

4. Do not use arguments

Inside a normal function, you can use the arguments To get the parameters passed in, which is a class array object: 


const getSum = (a, b) => {
    return a + b;
};
1

The arrow function cannot be used arguments Object, the input parameters cannot be obtained.

In the browser, if you use the arrow function arguments Object, an error will be reported. 


const getSum = (a, b) => {
    return a + b;
};
2

But the arrow function can be inside the parameter, with the ...args The way, get the input parameters, and get the args Is an array. 


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

5. The arrow function does not support new. target

Inside the constructor defined by ordinary functions, it supports using new.target Returns the constructor that constructs the instance. 


const getSum = (a, b) => {
    return a + b;
};
4

In the arrow function, the use of the new.target . In a browser environment, the arrow function uses the new.target An error will be reported: new.target expression is not allowed here . 


const getSum = (a, b) => {
    return a + b;
};
5

This article refers to:

JavaScript Advanced Programming, 4th Edition

Related articles: