1. Introduction

The arrow function is a new ES6 standard function. Delete the “function” keyword and function name of the original function, and use “=>” to connect the argument list to the function body.

2. Arrow function

2.1 Matters needing attention in writing arrow function

2.1.1 The arrow function can assign a value to only one variable and cannot exist independently

Example:

let func = (x, y) => (x, y) => x + y
Copy the code

The arrow function can only assign a value to one variable. A single “(x, y) => (x, y) => x + y” is not a specification.

2.1.2 If there is only one parameter, do not add parentheses. If there are multiple or zero parameters, add parentheses

Example:

let func1 = x => y => x + y
let func2 = (x, y) => x + y
Copy the code

2.1.3 If an object is returned, enclose the object with parentheses to distinguish it from the function body

Example:

Let func () = = > {x: 1} / / mistake let func () = = > (1} {x:) / / correctCopy the code

2.2 Arrow function this

The arrow function’s this is determined by its outer (function or global) scope, and the orientation of this cannot be changed by call, bind, apply, etc. Example:

let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1()
obj2.func2()
Copy the code

Output:



Func1’s this points to obj1

Func2’s this refers to this determined by its outer scope obj2

In the following example, func2 outputs this pointing to obj

let obj = {
    x: 2,
    obj1: function() {
        let func2 = () => {
            console.log(this)
        }
        return func2
    }
}
obj.obj1()()
Copy the code

The output is:

Func2’s outer scope is obj1, and this points to this, the layer above obj1. That is, obj uses call to change the direction of func1 and func2. Func1’s This becomes obj, and Func2’s This still points to window

let obj = {
    x: 0
}
let obj1 = {
    x: 1,
    func1: function() {
        console.log(this)
    }
}
let obj2 = {
    x: 2,
    func2: () => {
        console.log(this)
    }
}
obj1.func1.call(obj)
obj2.func2.call(obj)
Copy the code

Output:

2.3 Arrow function does not have Arguments (class array)

An ordinary object whose property names are all positive integers and have the corresponding Length attribute behaves like an Array even though the object is not created by the Array constructor. In this case, these objects are called “array-like objects.” Array-like objects have the property that you can apply the operations of arrays on array-like objects, but not all methods of arrays are supported by typed arrays (such as push and POP) example:

let value={
    5:'a',
    3:'b',
    1:'c',
    2:'d',
    length: 3
}
console.log(Array.prototype.join.call(value))
Copy the code

[,’c’,’d’] arguments Examples of array-like objects corresponding to arguments passed to a function:

function func1(a, b, c) {
    console.log(arguments)
}
let func2 = (a, b, c)=>{
    console.log(arguments)
}
func1(1, 2, 3)
func2(1, 2, 3)
Copy the code

Output:

2.4 Arrow functions cannot be new

Arrow functions don’t have prototype, so you can’t create objects with new.

function func1(a, b, c) {
}
let func2 = (a, b, c)=>{
}
console.dir(func1)
console.dir(func2)
Copy the code

Output: