In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-09-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
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!
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
The market share of Chrome browser on the desktop has exceeded 70%, and users are complaining about
The world's first 2nm mobile chip: Samsung Exynos 2600 is ready for mass production.According to a r
A US federal judge has ruled that Google can keep its Chrome browser, but it will be prohibited from
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
About us Contact us Product review car news thenatureplanet
More Form oMedia: AutoTimes. Bestcoffee. SL News. Jarebook. Coffee Hunters. Sundaily. Modezone. NNB. Coffee. Game News. FrontStreet. GGAMEN
© 2024 shulou.com SLNews company. All rights reserved.