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

This article mainly introduces "how to use ES6 arrow function". In daily operation, I believe many people have doubts about how to use ES6 arrow function. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to use ES6 arrow function". Next, please follow the editor to study!

The ES6 Arrow function seems to be an addictive function, and once you know it, it's easy to keep using it. As part of the 2015 ECMAScript 6 update, the arrow function has become popular for good reason. Arrow function syntax is an excellent syntax sugar that can solve many requirements:

Function keyword

Curly braces

Return keyword (for single-line functions)

In addition, the arrow function reduces the scope of the JavaScript function and some of the complexity of the this keyword, because sometimes all you really need is an anonymous function.

But in fact, the arrow function does not necessarily address every requirement when writing JavaScript functions.

Object prototype

Take a look at the JavaScript code snippet first:

ClassRobot {constructor (name,catchPhrase) {this.name= name; this.catchPhrase= catchPhrase;}}; Robot.prototype.speak= () = > {console.log (this = window); return this.catchPhrase}; const ironG = newRobot ("Iron Giant", "Be good"); ironG.speak ()

The function call on line 15 is as follows:

True undefined

The speak () prototype function is defined and the slogan is passed to the new Robot object, so why is the calculation of this code undefined?

Console.log () reveals why. As you can see, it returns true when the console is asked to judge (this = = window). This provides a basis for what is discussed in the object method example above.

When using functions that require context, you must use regular function syntax in order for this to bind correctly:

Robot.prototype.speak=function () {console.log (this = = ironG); / / true return this.catchphrase;}

Object method

Suppose you want to create a method that is bound to an object.

Const mario = {lives: 3, oneUp: () = > {this.lives++;}}

In this example, if you call mario.oneUp (), the value of mario.lives should be increased from 3 to 4. However, according to the code written so far, no matter how many times oneUp () is called, the value of lives will remain the same.

Why? It's because of this!

As MDN says: the arrow function itself does not have a this. The this value of the closed lexical range is used; the arrow function follows the normal variable lookup rules. Therefore, when searching for a this that does not exist in the current scope, the arrow function will eventually find the this in its closed scope.

In the example, the enclosed scope is the window object. Calling oneUp () requires the program to increase the value of lives in the window object. Such a value does not exist, so the code does not work.

Instead, use the traditional function syntax, which binds the this of the function to the specific object that calls the function:

Const mario = {lives: 3, oneUp: function () {this.lives++;}}

Dynamic context

The last example:

Const button = document.querySelector (# darkMode); button.addEventListener ('click', () = > {this.classList.toggle (' on');})

By now, you may have realized that this code is invalid and why. Yes, it has something to do with this.

The arrow function syntax binds the context statically when the function is declared, as opposed to what you try to achieve when using event handlers or event listeners, which are dynamic in nature.

When an DOM is manipulated through an event handler or listener, the event triggered points to the this that belongs to the target element.

For arrow functions defined in the global execution context, this points to window. Therefore, in the above code, this.classList will be considered to be window.classList, resulting in TypeError.

At this point, the study on "how to use the ES6 arrow function" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.