What does es6 arrow mean?

In es6, the arrow "=>" refers to the arrow function, which is an abbreviation for a function. It deletes the "function" keyword and function name of the original function and uses " =>" connects the parameter list and the function body; the example statement "v=>v;" is equivalent to "function (v){return v;}".

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

The ES6 standard adds a new function: Arrow Function.

Basic syntax

Usual function definition method

var fn1 = function(a, b) {
    return a + b
}

function fn2(a, b) {
    return a + b
}

Use ES6 arrow function syntax to define a function, replace the "function" of the original function Keywords and function names are deleted, and "=>" is used to connect the parameter list and function body.

var fn1 = (a, b) => {
    return a + b
}

(a, b) => {
    return a + b
}

When there is only one function parameter, the parentheses can be omitted; but when there are no parameters, the parentheses cannot be omitted.

// 无参
var fn1 = function() {}
var fn1 = () => {}

// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}

// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}

// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}

Arrow functions are equivalent to anonymous functions and simplify function definition. There are two formats of arrow functions. One contains only one expression, omitting {...} and return. There is also a method that can contain multiple statements. In this case, { ... } and return

() => return 'hello'
(a, b) => a + b

(a) => {
  a = a + 1
  return a
}

need to be paid special attention to if an object is returned. If it is a single expression, Return a custom object. If you do not write brackets, an error will be reported because there is a syntax conflict with {...} in the function body.

Note that using curly brackets in parentheses is the definition of the object, not the body of the function

x => {key: x} // 报错
x => ({key: x}) // 正确

The arrow function looks like It is an abbreviation for an anonymous function, but in fact, there is a clear difference between arrow functions and anonymous functions: This inside the arrow function is the lexical scope, determined by the context. (Lexical scope is the scope defined in the lexical stage. In other words, Lexical scope is determined by where you write the variable and block scope when you write the code , so when lexical analysis The scope will remain unchanged when the handler processes the code.)

Non-arrow functions

Now, the arrow function completely fixes the pointing of this. This always points to the lexical scope, which is the outer caller Person

##Because this The arrow function has been bound according to the lexical scope. Therefore, when calling the arrow function with call() or apply(), this cannot be bound, that is, the first parameter passed in is ignored

Every Function object in JavaScript has an apply() method and a call() method

apply calls a method of an object and replaces the current object with another object. For example: B.apply(A, arguments); that is, the A object calls the method of the B object. func.apply(thisArg, [argsArray])

call calls a method of an object and replaces the current object with another object. For example: B.call(A, args1,args2); that is, the A object calls the method of the B object. func.call(thisArg, arg1, arg2, ...)

For details, please refer to "The Difference and Application of Apply() and Call() in JavaScript"

Non-arrow function, the data printed when calling call()

After using the arrow function, the previous one is no longer needed

How to write hack, var that = this. But you cannot blindly use ES6 arrow functions. Please see the next section "Use Arrow Functions Correctly - When Not to Use ES6 Arrow Functions".

Summary

• Similar to anonymous functions, used in some cases, can reduce the amount of code

• The code is concise, this is defined in advance

• The code is too concise, making it difficult to read

• This is defined in advance, resulting in the inability to use js Perform some operations that look very normal in ES5 (if you use arrow functions, you will not be able to get the currently clicked element in the callback function that listens to the click event. For details, see "Using Arrow Functions Correctly - When Not to Use them") ES6 Arrow Function》)

• In general, the arrow function is just a shorthand for a function. It has its pros and cons. You can use it or not. It depends on everyone’s mood, and of course it must be used correctly

[Recommended learning:

javascript advanced tutorial]

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