The arrow function has another important change from the normal function, that is, it does not change the direction of this.

const person = {
    name: 'Tom',
    sayHi: function () {
        console.log(`hi, my name is ${this.name}`)
    }
}
person.sayHi() // hi, my name is Tom
Copy the code

If you change the sayHi method to the arrow function, you’ll notice that this.name prints undefined. That’s the most important difference between an arrow function and a normal function, because there’s no mechanism for this in an arrow function so it doesn’t change the direction of this. That is, whatever this is outside of the arrow function, this is what you get inside and it doesn’t change in any case.

const person = { name: 'Tom', sayHi: () => { console.log(`hi, my name is ${this.name}`) }, sayHiAsyncThis: Function (){setTimeout(function(){// Async functions will be called on the global object console.log(this.name)}, 1000)}, sayHiAsync_this: Function () {// This const _this = this setTimeOut(function(){console.log(_this.name)},1000)} sayHiAsyncArrow: Function () {this setTimeOut(() => {console.log(this.name)}; 1000) } } person.sayHi() // hi, my name is undefined person.sayHiAsyncThis() // undefined person.sayHiAsync_this() // Tom person.sayHiAsyncArrow() // TomCopy the code