### [Arrow Functions and `this`](https://www.w3schools.com/react/react_es6_arrow.asp)
The handling of `this` is different in arrow functions compared to regular functions.
Arrow functions don't provide their own `this` binding (it retains the `this` value of the enclosing lexical context). In other words, with arrow functions there is no binding of `this`.
In regular functions the `this` keyword represents the object that called the function, which could be the window, the document, a button, etc.
With arrow functions, the `this` keyword _always_ represents the object that defined the arrow function.
###### Regular Function Example
```jsx
// With a regular function, `this` represents the object that called the function
class Header {
constructor() {
this.color = "Red";
}
//Regular function:
changeColor = function() {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
```
###### Arrow Function Example:
```jsx
// With an arrow function, `this` represents the Header object no matter who called the function:
class Header {
constructor() {
this.color = "Red";
}
//Arrow function:
changeColor = () => {
document.getElementById("demo").innerHTML += this;
}
}
const myheader = new Header();
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);
```