What are the characteristics of es6 arrow functions?

es6 The characteristics of the arrow function are: 1. The arrow function has no arguments object; 2. The this value of the arrow function depends on the this value of the non-arrow function outside the function, and the arrow function cannot change the direction of this; 3. Arrow Functions cannot be declared with the new keyword; 4. Arrow functions have no prototype attribute.

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

The ES6 standard adds a new function: Arrow Function.

Why is it called Arrow Function? Because its definition uses an arrow:

x => x * x

The arrow function above is equivalent to:

function (x) {    
return x * x;
}

The arrow function is equivalent to an anonymous function and simplifies the function definition. There are two formats of arrow functions. One is like the one above, which contains only one expression, and even {...} and return are omitted. There is also a method that can contain multiple statements. In this case, { ... } and return cannot be omitted:

x => {
    if (x > 0) {
        return x * x;
    }
    else {
        return - x * x;
    }
}

If there is not one parameter, it needs to be enclosed in brackets ():

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

If you want to return an object, please note that if it is a single expression, an error will be reported if you write it like this:

// SyntaxError:
x => { foo: x }

Because there is a syntax conflict with { ... } in the function body, so it should be changed to:

// ok:
x => ({ foo: x })

es6 Characteristics of arrow functions

1. The arrow function has no arguments

let test1 = () => {
    console.log(arguments)
}
test1(123) // arguments is not defined

Looking for arrow functions The arguments object will only look for the outer non-arrow function function. If the outer layer is a non-arrow function function and it does not have an arguments object, it will interrupt and return, and it will not look for the outer layer.

function test2(a, b, c){
    return () => {
    console.log(arguments) // [1]
    }
}
test2(1)()

2. Arrow function this value

The this value of the arrow function depends on the this value of the non-arrow function outside the function. If the upper layer is still an arrow function, then continue to look up. If If it cannot be found, then this is the window object

let person = {
    test: () => {
        console.log(this)
    },
    fn(){
        return () => {
            console.log(this)
        }
    }
}
person.test()  // window
person.fn()()  // person对象

The arrow function cannot change the point of this

let person = {}
let test = () => console.log(this)
test.bind(person)()
test.call(person)
test.apply(person)

This is already determined during pre-compilation.

3. Arrow functions cannot be declared with the new keyword

let test = () => {}
new test() // Uncaught TypeError: test is not a constructor

4. Arrow functions have no prototype prototype attribute

JavaScript Do all functions in have the prototype attribute? This is wrong.

let test = () => {}
test.prototype // undefined
test.__proto__ === Function.prototype // true

Arrow functions cannot re-name parameters

// 箭头函数不能重复命名参数
let bbb = (b, b, b) => {
} 
// Uncaught SyntaxError: Duplicate parameter name not allowed in this context
let bb = function(b, b, b){
}
// es5 不会报错

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of What are the characteristics of es6 arrow functions?. For more information, please follow other related articles on the PHP Chinese website!