Arrow function

ES6 introduces the concept of arrow functions, which is a new way to define and write functions. Although it looks like the syntactic sugar of a regular function, the key difference between them is how this is bound. I won’t go into a lot of detail about this in this article

Event listener callback

When writing JavaScript to a browser, we often create event listeners. Such as:

const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

In the example above, using the nodelist. Prototype. The foreach () to traverse the specified selectors and eventtarget. The addeventlistener () that match the node, and regular exchange the callback function as the click event, This callback is called to switch between the active and inactive states of the clicked element. When using a regular function, this in the callback is bound to the element that fired the event.

Use the arrow function as a callback

The arrow function does not have its own binding to this. So what happens if you convert the previous code snippet to an arrow function? Its this refers to the global window object.

const toggleElements = document.querySelectorAll('.toggle'); toggleElements.forEach(el => { el.addEventListener('click', () => { this.classList.toggle('active'); // "this" points to "window" // Error: Cannot read property 'toggle' of undefined}); });

Because the window object does not have a classlist attribute, the code throws an error whenever it clicks on a matching element, triggering an event listener and executing a callback. But more often than not, code can fail quietly, such as checking for a condition that always returns false for window but should return true for a given element, which can cause a lot of trouble and waste your time.

To solve this problem, simply call the first argument to the callback function and either Event.Target or Event.currentTarget, depending on your needs:

const toggleElements = document.querySelectorAll('.toggle'); toggleElements.forEach(el => { el.addEventListener('click', (e) => { e.currentTarget.classList.toggle('active'); // working well}); });

This article first send WeChat messages public number: front-end pioneer

Welcome to scan the two-dimensional code to pay attention to the public number, every day to push you fresh front-end technology articles

Read on for the other great articles in this column:

  • Deep understanding of Shadow DOM V1
  • Step-by-step tutorial on implementing virtual reality games with WebVR
  • 13 modern CSS frameworks to help you improve your development efficiency
  • Quickly start BootstrapVue
  • How does a JavaScript engine work? Everything you need to know, from the call stack to the Promise
  • WebSocket in action: real-time communication between Node and React
  • 20 interview questions about Git
  • Deep parsing of Node.js console.log
  • What exactly is Node.js?
  • Build an API server with Node.js in 30 minutes
  • A copy of the JavaScript object
  • Programmer 30 years old before the monthly salary is less than 30K, which way to go
  • 14 of the best JavaScript data visualization libraries
  • 8 top VS Code extensions for the front end
  • A complete guide to Node.js multithreading
  • Convert HTML to PDF 4 solutions and implementation
  • More articles…