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

Editor to share with you what is the use of the JS arrow function, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

In JS, arrowhead functions can be used in a variety of ways like normal functions. However, they are generally used to require anonymous function expressions, such as callback functions.

The following example shows an example arrow function as a callback function, especially for array methods such as map (), filter (), reduce (), sort (), and so on.

Const scores = [1,28,66,666]; const maxScore = Math.max (.. scores); scores.map (score = > + (score / maxScore) .toFixed (2))

At first glance, it seems that arrow functions can be defined and used as regular functions, but this is not the case. Because of the simplicity of the arrowhead function, it is different from the regular function. To put it another way, the arrowhead function may think of the arrowhead function as an abnormal JS function.

Although the syntax of the arrow function is very simple, this is not the focus of this article. This article mainly talks about the differences in the behavior of arrow functions and regular functions, and if we take advantage of these differences to better use arrow functions.

The ● arrow function has no arguments binding. However, they can access the arguments object of the nearest non-arrowhead parent function.

● arrow functions can never be used as constructors, and naturally they cannot be called using the new keyword, so there is no prototype property for arrow functions.

● throughout the life cycle of the function, the value inside the arrow function remains the same and is always bound to the value in the close non-arrowhead parent function.

Named function parameters

Functions in JS are usually defined with named parameters. Named parameters are used to map parameters to local variables in the scope of the function based on location.

Take a look at the following functions:

Function logParams (first, second, third) {console.log (first, second, third);} / / first = > 'Hello'// second = >' World'// third = >'!! 'logParams (' Hello', 'World','!); / / "Hello"World"!" / / first = > {o: 3} / / second = > [1,2,3] / third = > undefinedlogParams ({o: 3}, [1,2,3]) / / {o: 3} [1, 2, 3]

The logParams () function is defined by three named parameters: first, second, and third. If there are more named arguments than are passed to the function, the remaining arguments undefined.

For named parameters, the JS function behaves strangely in non-strict mode. In non-strict mode, the JS function allows duplicate named parameters. Take a look at the example:

Function logParams (first, second, first) {console.log (first, second);} / / first = > 'Hello'// second = >' World'// first = >'!! 'logParams (' Hello', 'World','!!'); / / "!" "World" / / first = > {o: 3} / / second = > [1,2,3] / / first = > undefinedlogParams ({o: 3}, [1,2,3]); / / undefined [1,2,3]

We can see that the first parameter is duplicated, so it is mapped to the value of the third parameter passed to the function call, overriding the first parameter, which is not a desirable behavior.

/ / due to duplicate parameters, strict mode will error function logParams (first, second, first) {"use strict"; console.log (first, second);}

How the Arrow function handles duplicate parameters

About the arrow function:

Unlike regular functions, the arrow function does not allow repetition of parameters, whether in strict mode or non-strict mode, and duplicate parameters will cause syntax errors.

/ / as long as you dare to write repeated parameters, I dare to show you const logParams = (first, second, first) = > {console.log (first, second);}

Function overload

Function overloading is the ability to define a function, so that the corresponding function can be called according to the number of parameters. Binding can be used to achieve this function in JS.

Let's take a look at a simple overloaded function that calculates the average of the incoming parameters:

Function average () {const length = arguments.length; if (length = 0) return 0; / / converts the parameter to an array const numbers = Array.prototype.slice.call (arguments); const sumReduceFn = function (a, b) {return a + Number (b)}; / / returns the sum of array elements divided by the length of the array return numbers.reduce (sumReduceFn, 0) / length;}

In this way, the function can be called with any number of arguments, from 0 to the maximum number of arguments that the function can accept should be 255.

Average (); / 0average (4, 5); / NaNaverage (1, 2, 3, 4, 5, 6, 7, 8, 9, 10); / 5.5average (1.75,2.25,3.5, 4.125, 5.875)

Const average = () = > {const length = arguments.length; if (length = = 0) return 0; const numbers = Array.prototype.slice.call (arguments); const sumReduceFn = function (a, b) {return a + Number (b)}; return numbers.reduce (sumReduceFn, 0) / length;}

Now when we test this function, we will find that it throws a reference error, arguments is not defined.

What did we do wrong?

For arrow functions:

Unlike regular functions, arguments does not exist in the arrow function. However, you can access arguments objects that are not arrowhead parent functions.

Based on this understanding, the average () function can be modified to a regular function that returns the result of execution by an immediately called nested arrow function that can access the arguments of the parent function.

Function average () {return (()) = > {const length = arguments.length; if (length = = 0) return 0; const numbers = Array.prototype.slice.call (arguments); const sumReduceFn = function (a, b) {return a + Number (b)}; return numbers.reduce (sumReduceFn, 0) / length;}) ();}

Do something different.

For whether there is an alternative to the above question, you can use the rest parameter of es6.

Using the ES6 rest parameter, we can get an array that holds all the parameters passed to the function. The rest syntax applies to all types of functions, whether regular functions or arrow functions.

Const average = (... args) = > {if (args.length = = 0) return 0; const sumReduceFn = function (a, b) {return a + Number (b)}; return args.reduce (sumReduceFn, 0) / args.length;}

There are some things to be aware of when using the rest parameter:

The ● rest parameter is different from the arguments object inside the function. The rest parameter is an actual function parameter, while the arguments object is an internal object bound to the function scope.

● A function can only have one rest argument, and it must be in the last argument. This means that a function can contain a combination of named parameters and rest parameters.

When the ● rest parameter is used with a named parameter, it does not contain all incoming parameters. However, when it is the only function parameter, it represents the function parameter. The arguments object of a function, on the other hand, always captures the parameters of all functions.

Then consider another simple overloaded function that converts a number into a binary number of another class based on the passed-in digits. You can call this function with one or three parameters. However, when it is called with two or fewer arguments, it exchanges the second and third function arguments. As follows:

Function baseConvert (num, fromRadix = 10, toRadix = 10) {if (arguments.length)

< 3) { // swap variables using array destructuring [toRadix, fromRadix] = [fromRadix, toRadix]; } return parseInt(num, fromRadix).toString(toRadix);} 调用 baseConvert 方法： // num =>

FromRadix = > 10, toRadix = > 10console.log (baseConvert (123)); / / "123" / / num = > 255, fromRadix = > 10, toRadix = > 2console.log (baseConvert (255,2)); / / "11111111" / / num = > 'ff', fromRadix = > 16, toRadix = > 8console.log (baseConvert (' ff', 16,8))

Use the arrow function to override the above method:

Const baseConvert = (num,... args) = > {/ / deconstruct the `args` array and / / set the local variables let [fromRadix = 10, toRadix = 10] = args; if (args.length)

< 2) { // 使用数组解构交换变量 [toRadix, fromRadix] = [fromRadix, toRadix]; } return parseInt(num, fromRadix).toString(toRadix);} 构造函数 可以使用new关键字调用常规JS函数，该函数作为类构造函数用于创建新的实例对象。 function Square (length = 10) { this.length = parseInt(length) || 10; this.getArea = function() { return Math.pow(this.length, 2); } this.getPerimeter = function() { return 4 * this.length; }}const square = new Square();console.log(square.length); // 10console.log(square.getArea()); // 100console.log(square.getPerimeter()); // 40console.log(typeof square); // "object"console.log(square instanceof Square); // true 当使用new关键字调用常规JS函数时，将调用函数内部[[Construct]]方法来创建一个新的实例对象并分配内存。之后，函数体将正常执行，并将this映射到新创建的实例对象。最后，函数隐式地返回 this(新创建的实例对象)，只是在函数定义中指定了一个不同的返回值。 此外，所有常规JS函数都有一个prototype属性。函数的prototype属性是一个对象，它包含函数创建的所有实例对象在用作构造函数时共享的属性和方法。 以下是对前面的Square函数的一个小修改，这次它从函数的原型上的方法，而不是构造函数本身。 function Square (length = 10) { this.length = parseInt(length) || 10;}Square.prototype.getArea = function() { return Math.pow(this.length, 2);}Square.prototype.getPerimeter = function() { return 4 * this.length;}const square = new Square();console.log(square.length); // 10console.log(square.getArea()); // 100console.log(square.getPerimeter()); // 40console.log(typeof square); // "object"console.log(square instanceof Square); // true 如下所知，一切仍然按预期工作。 事实上，这里有一个小秘密：ES6 类在后台执行类似于上面代码片段的操作 - 类(class)只是个语法糖。 那么箭头函数呢 它们是否也与常规JS函数共享此行为?答案是否定的。关于箭头函数: 与常规函数不同，箭头函数永远不能使用new关键字调用，因为它们没有[[Construct]]方法。 因此，箭头函数也不存在prototype属性。 箭头函数不能用作构造函数，无法使用new关键字调用它们，如果这样做了会抛出一个错误，表明该函数不是构造函数。 因此，对于箭头函数，不存在可以作为构造函数调用的函数内部的new.target等绑定，相反，它们使用最接近的非箭头父函数的new.target值。 此外，由于无法使用new关键字调用箭头函数，因此实际上不需要它们具有原型。 因此，箭头函数不存在prototype属性。 由于箭头函数的prototype 为 undefined，尝试使用属性和方法来扩充它，或者访问它上面的属性，都会引发错误。 const Square = (length = 10) =>

{this.length = parseInt (length) | | 10;} / / throws an errorconst square = new Square (5); / / throws an errorSquare.prototype.getArea = function () {return Math.pow (this.length, 2);} console.log (Square.prototype); / / undefined

What is this?

Each call to the JS function is associated with the calling context, depending on how or where the function is called.

The internal this value of a function depends on the calling context of the function when it is called, which usually forces the developer to ask himself the question: what is the this value?

The following is a summary of calling this for different types of functions:

● uses the new keyword to call: this points to a new instance object created by the internal [[Construct]] method of the function. This (newly created instance objects) is usually returned by default, except that a different return value is explicitly specified in the function definition.

● is called directly without the new keyword: in non-strict mode, this points to the window object (in the browser). However, in strict mode, the is value is undefined;, so attempting to access or set this property will throw an error.

● is called indirectly using a bound object: the Function.prototype object provides three methods to bind a function to any object when a function is called, namely: call (), apply (), and bind (). When a function is called using these methods, the this points to the specified bound object.

● is called as an object method: this points to the object that calls the function (method), whether the method is defined as its own property or parsed from the object's prototype chain.

● is called as an event handler: for regular functions used as DOM event listeners, this points to the target object, DOM element, document, or window that triggered the event.

Let's look at another function, which will be used as a click event listener, for example, a form submit button:

Function processFormData (evt) {evt.preventDefault (); const form = this.closest ('form'); const data = new FormData (form); const {action: url, method} = form;} button.addEventListener (' click', processFormData, false)

As you saw earlier, the this value in the event listener function is the DOM element that triggers the click event, in this case button.

Therefore, you can use the following command to point to the parent form of the submit button

This.closest ('form')

What happens if you change the function to the arrow function syntax?

Const processFormData = (evt) = > {evt.preventDefault (); const form = this.closest ('form'); const data = new FormData (form); const {action: url, method} = form;} button.addEventListener (' click', processFormData, false)

If we try this now, we get an error. On the face of it, the value of this is not what you want. For some reason, it no longer points to the button element, but to the window object.

How to fix this pointing to

Use the Function.prototype.bind () mentioned above to force the binding of the th value to the button element:

Button.addEventListener ('click', processFormData.bind (button), false)

But this doesn't seem to be the solution you want. This still points to the window object. Is this a problem specific to the arrow function? Does this mean that arrow functions cannot be used for this-dependent event handling?

Why did you make a mistake?

One last thing about the arrow function:

Unlike regular functions, arrow functions do not have this bindings. The value of this resolves to the value of the nearest non-arrowhead parent function or global object.

This explains why the th value in the event listener arrow function points to the window object (the global object). Because it is not nested in the parent function, it uses the th value from the nearest parent scope, which is the global scope.

However, this does not explain why you cannot use bind () to bind the event listener arrow function to the button element. There is an explanation for this:

Unlike regular functions, the this value of an internal arrow function remains the same and cannot be changed throughout its life cycle, regardless of the call context.

This behavior of the arrow functions allows the JS engine to optimize them because function bindings can be determined in advance.

Consider a slightly different scenario where the event handler is defined using a regular function in the object method and also depends on another method of the same object:

({_ sortByFileSize: function (filelist) {const files = Array.from (filelist) .sort (function (a, b) {return a.size-b.size;}); return files.map (function (file) {return file.name;});}, init: function (input) {input.addEventListener ('change', function (evt) {const files = evt.target.files) Console.log (this._sortByFileSize (files));}, false);}) .init (document.getElementById ('file-input'))

Above is an one-time object with a _ sortByFileSize () method and an init () method, and immediately calls the init method. The init () method accepts an input element and sets a change event handler for the input element, which sorts the uploaded files by file size and prints them to the browser's console.

If you test this code, you will find that when you select a file to upload, the list of files will not be sorted and printed to the console; instead, an error will be thrown on the console, and the problem lies on this line:

Console.log (this._sortByFileSize (files))

Inside the event listener function, this points to the input element, so this._sortByFileSize is undefined.

To solve this problem, you need to bind the this in the event listener to the external object that contains the method so that this._sortByFileSize () can be called. Here, you can use bind (), as follows:

Init: function (input) {input.addEventListener ('change', (function (evt) {const files = evt.target.files; console.log (this._sortByFileSize (files));}) .bind (this), false);}

Everything's fine now. Instead of using bind () here, you can simply replace the event listener function with an arrow function. The arrow function will use the value of this in the parent init () method:

Init: function (input) {input.addEventListener ('change', (function (evt) {const files = evt.target.files; console.log (this._sortByFileSize (files));}) .bind (this), false);}

Consider another scenario, suppose there is a simple timer function that can be called as a constructor to create a countdown timer in seconds. Use setInterval () for a countdown until the duration expires or the interval is cleared, as follows:

Function Timer (seconds = 60) {this.seconds = parseInt (seconds) | | 60; console.log (this.seconds); this.interval = setInterval (function () {console.log (--this.seconds); if (this.seconds = = 0) {this.interval & & clearInterval (this.interval);}}, 1000);} const timer = new Timer (30)

If you run this code, you will see that the countdown timer seems to have been broken, printing the NaN all the time on the console.

The problem here is that in the callback function passed to setInterval (), this points to the global window object, rather than the newly created instance object in the scope of the Timer () function. Therefore, both this.seconds and this.interval are undefined.

As before, to fix this problem, you can use bind () to bind the th value in the setInterval () callback function to the newly created instance object, as shown below

Function Timer (seconds = 60) {this.seconds = parseInt (seconds) | | 60; console.log (this.seconds); this.interval = setInterval ((function () {console.log (--this.seconds); if (this.seconds = = 0) {this.interval & & clearInterval (this.interval);}}) .bind (this), 1000);}

Or, better yet, you can replace the setInterval () callback function with an arrow function so that it can use the th value of the nearest non-arrow parent function:

Function Timer (seconds = 60) {this.seconds = parseInt (seconds) | | 60; console.log (this.seconds); this.interval = setInterval (() = > {console.log (--this.seconds); if (this.seconds = = 0) {this.interval & & clearInterval (this.interval);}}, 1000);}

Now that you understand how the arrowhead function handles the this keyword, it is also important to note that the arrowhead function is not ideal for situations where you need to retain the th value-for example, when defining an object method that needs to be referenced, use a method that references the target object to extend the object or extend the prototype of the function.

Binding that does not exist

In this article, you've seen bindings that can be used in regular JS functions, but there are no bindings for arrow functions. Instead, the arrow function derives the value of such a binding from the nearest non-arrowhead parent function.

In summary, the following is a list of bindings that do not exist in the arrow function:

● arguments: list of arguments passed to the function when called

● new.target: use the new keyword as a reference to the function called by the constructor

● super: a reference to the prototype of the object to which the function belongs, provided that the object is defined as a concise object method

● this: a reference to the calling context object of a function

The above is all the content of this article "what is the use of JS Arrow function?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.