What is the arrow function in JavaScript

This article mainly explains "what is the arrow function in JavaScript". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the arrow function in JavaScript".

First, the arrow function does not have "this"

As we learned in the object method, "this" chapter, the arrow function does not have a this. If you access this, it will be obtained from the outside.

For example, we can use it to iterate within object methods:

Let group = {title: "Our Group", students: ["John", "Pete", "Alice"], showList () {this.students.forEach (student = > alert (this.title +':'+ student));}}; group.showList ()

The arrow function is used in forEach, so the this.title is actually exactly the same as the external method showList. That is: group.title.

If we use normal functions, there will be an error:

Let group = {title: "Our Group", students: ["John", "Pete", "Alice"], showList () {this.students.forEach (function (student) {/ / Error: Cannot read property 'title' of undefined alert (this.title +':'+ student)});}; group.showList ()

The error is reported because forEach runs the function in it, but the this of this function is the default this=undefined, so there is an attempt to access undefined.title.

But arrow functions are fine because they don't have this.

Cannot new the arrowhead function

Not having a this naturally means another limitation: the arrow function cannot be used as a constructor. They cannot be called with new.

Arrow function VS bind

There is a slight difference between the arrow function = > and the regular function called with .bind (this):

.bind (this) creates a "bound version" of the function.

The arrow function = > did not create any bindings. The arrow function just doesn't have this. This searches in exactly the same way as regular variables: in an external lexical environment.

Second, the arrow function does not have "arguments"

The arrow function also has no arguments variable.

This is useful for decorators when we need to forward a call using the current this and arguments.

For example, defer (f, ms) takes a function and returns a wrapper that will call delay ms milliseconds:

Function defer (f, ms) {return function () {setTimeout (()) = > f.apply (this, arguments), ms)};} function sayHi (who) {alert ('Hello,' + who);} let sayHiDeferred = defer (sayHi, 2000); sayHiDeferred ("John"); / / 2 seconds later: Hello, John

Instead of using the arrow function, you can write:

Function defer (f, ms) {return function (... args) {let ctx = this; setTimeout (function () {return f.apply (ctx, args);}, ms);};}

Here, we must create additional variables args and ctx so that functions within setTimeout can get them.

III. Summary

Arrow function:

No this.

No arguments.

Cannot use new to make calls

They don't have super either, but we haven't learned about it yet. We will learn about it in the chapter on class inheritance.

This is because the arrow function is for short code that does not have its own "context" but works in the current context. And the arrow function does shine in this usage scenario.

Thank you for your reading, these are the contents of "what is the arrow function in JavaScript". After the study of this article, I believe you have a deeper understanding of what the arrow function in JavaScript is, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!