Shulou(Shulou.com)06/03 Report--

This article introduces you how to understand the es6 arrow, the content is very detailed, interested friends can refer to, hope to be helpful to you.

In es6, the arrow "= >" refers to the arrow function, which is a shorthand method of the function, which deletes the "function" keyword and function name of the original function, and uses "= >" to connect 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: windows7 system, ECMAScript version 6, Dell G3 computer.

A new function has been added to the ES6 standard: Arrow Function (arrow function).

Basic grammar

The usual method of defining a function

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

Use the ES6 arrow function syntax to define the function, delete the "function" keyword and function name of the original function, and use "= >" to connect the parameter list and the function body.

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

Parentheses can be omitted when there is only one parameter for the function, but not when there are no arguments.

/ / No parameter var fn1 = function () {} var fn1 = () > {} / / single parameter var fn2 = function (a) {} var fn2 = a = > {} / / multiple parameters var fn3 = function (a, b) {} var fn3 = (a, b) = > {} / / variable parameter var fn4 = function (a, b,... args) {} var fn4 = (a, b,... args) = > {}

The arrow function is equivalent to an anonymous function and simplifies the function definition. Arrow functions come in two formats, one containing only one expression, omitting {...} and return. There is another way that can contain more than one statement, so {...} and return cannot be omitted.

() = > return 'hello' (a, b) = > a + b (a) = > {a = a + 1 return a}

If you return an object, you need to pay special attention. If a single expression returns a custom object, not writing parentheses will report an error because it conflicts with the syntax of the function body {.}.

Note that including curly braces in parentheses is the definition of the object, not the body of the function.

X = > {key: X} / / error x = > ({key: X}) / / correct

The arrow function appears to be an abbreviation of an anonymous function, but in fact, there is an obvious difference between the arrow function and the anonymous function: the this inside the arrow function is lexical scope and is determined by the context. Lexical scope is the scope defined in the lexical stage. In other words, the lexical scope is determined by where you write the variables and blocks when you write the code, so the scope remains the same when the lexical analyzer processes the code. )

Non-arrow function

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

Since this is already bound according to lexical scope in the arrow function, this cannot be bound when the arrow function is called with call () or apply (), 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 one object, replacing the current object with another. For example: B.apply (A, arguments); that is, An object calls the method of B object. Func.apply (thisArg, [argsArray])

Call calls a method of one object, replacing the current object with another. For example: B.call (A, args1,args2); that is, An object calls the method of B object. Func.call (thisArg, arg1, arg2,...)

For details, see "the difference and Application of apply () and call () in JavaScript"

Non-arrowhead function, data printed when call () is called

After using the arrow function, you no longer need to write hack as before, var that = this. But do not blindly use the ES6 arrow function, see the next section, "using the Arrow function correctly-when not to use the ES6 Arrow function".

Summary

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

The code is concise and this defines it in advance.

The code is so concise that it is difficult to read

This is defined in advance, making it impossible to use js to perform operations that seem normal in ES5 (if you use the arrow function, the currently clicked element cannot be obtained in the callback function that listens for click events. For more information, please see "correct use of Arrow function-when should not use ES6 Arrow function")

Generally speaking, the arrow function is just an abbreviation of a function, which has its advantages and disadvantages. It can be used or not, depending on everyone's mood. Of course, it has to be used correctly.

On how to understand the es6 arrow to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.