Стрелочные функции против обычных функций: основы JavaScript

В последнее время я пытался освежить свои основы JavaScript и понял, что мне было трудно объяснить основные различия между стрелочными функциями и обычными функциями ( объявления и выражения). Давайте посмотрим на некоторые ключевые отличия!

"Этот"

Обычные функции

Очень важное различие между стрелочными функциями и обычными функциями заключается в том, на что this ссылается при вызове функции. В обычной декларативной функции this будет указывать на глобальный объект (окно).

function example(){
    console.log(this)
}
example() //=> logs the global object

Однако это в обычных функциях является динамическим. Если мы зарегистрируем это в console.log внутри функции метода, мы зарегистрируем объект, которому принадлежит метод.

const anotherExample = {
     exampleMethod() {
       console.log(this)
   }
}
anotherExample.exampleMethod() //=> logs anotherExample

Стрелочные функции

В стрелочных функциях this всегда указывает на значение внешней функции. Стрелочные функции выглядят лексически, и из-за этого они не определяют свой собственный контекст выполнения, который появится чуть позже.

const exObj = {
    exFunc() {
        console.log(this) //===> logs exObj
    const arrowFunc = () => {
           console.log(this) //===> logs exObj
         }
      }
}

Конструкторы

Следует отметить одну очень важную вещь: стрелочные функции нельзя использовать в качестве конструктора. Это происходит из-за лексической области видимости, на которую мы только что ссылались. Если вы попытаетесь использовать стрелочную функцию в качестве конструктора, вы получите ошибку.

Подъем

Обычные функции поднимаются, когда они являются декларативными.

function name(string){
    console.log(`My name is ${string}`)
}
//=> this will hoist

Однако функции как выражения не будут подниматься.

const name = function(string){
   console.log(`My name is ${string}`)
}
//=> this will not be hoisted

А поскольку стрелочные функции всегда записываются в виде выражений, они никогда не поднимаются. Подробнее о подъеме смотрите здесь.

Я надеюсь, что это было полезно!