Arrow functions can also be buggy…

  • Several situations where you should avoid using the arrow function
  • Author: JS bacteria

Fundebug is reproduced with authorization. All rights reserved.

1. Avoid using it when defining object methods

The arrow function is popular because of its concise syntax. However, the absence of this can lead to unexpected situations in some cases.

For example, defining a method on an object:

this.food = "banana"; let obj = { food: "strawberry", log() { console.log(this.food); }}; obj.log(); / / print "strawberry"Copy the code

It seems perfect that calling this method will get the object’s food property as expected

But if you change it to an arrow function:

this.food = "banana"; let obj = { food: "strawberry", log: () => { console.log(this.food); }}; obj.log(); / / print "banana"Copy the code

This is a bit of a bug because the arrow function does not have this itself and automatically inherits this from the outer layer, resulting in errors in printed variables.

Therefore, do not use arrow functions in object methods.

2. Avoid using on Prototype

Remember not to use arrow functions when defining prototype methods because there is no this to point to

this.name = "oli"; Function Person(name) {this.name = name; } Person.prototype.log = () => { console.log(this.name); }; let p = new Person(); p.log(); / / print "oli"Copy the code

3. Avoid using arguments on needs

Since the arrow function has no arguments, so if the outer layer is another function, then arguments is for that outer function

function foo() { return (... argv) => { console.log(... arguments); // Print [1, 2, 3], arrow functions have no arguments need to get console.log from external functions (... argv); // Print [1, 2, 3, 4]}; } foo([1, 2, 3])([1, 2, 3, 4]);Copy the code

Of course, you can use the REST operator to get the corresponding parameters

4. Avoid using callback functions in dynamic context

If you need your context to be mutable, dynamic, then don’t use arrow functions

For example, in a page, we need to add an event handler for each p element, then:

document.querySelectorAll('p').forEach(elem => { elem.addEventListener('click', () => {console.log(this.innertext.length)})Copy the code

To access the expected this correctly, change to a normal function:

document.querySelectorAll('p').forEach(elem => { elem.addEventListener('click', Function () {console.log(this.innertext.length)})}Copy the code

5. Avoid using it when you need caller

As caller is no longer a standard for recommendation, we should avoid using caller at any time

In other cases, especially map Reduce forEach where there is no complex logic, using arrow functions can add to the reading experience, which is great.

About Fundebug

Fundebug focuses on real-time BUG monitoring for JavaScript, wechat applets, wechat games, Alipay applets, React Native, Node.js and Java online applications. Since its launch on November 11, 2016, Fundebug has handled more than 1 billion error events in total, and paid customers include Google, 360, Kingsoft, Minming.com and many other brands. Welcome to try it for free!

Copyright statement

Fundebug



Blog.fundebug.com/2019/05/07/…

Are your users experiencing bugs?

Experience the Demo
Free to use