Как работает ключевое слово «this» и когда его следует использовать?

В jаvascript ключевое слово this используется для ссылки на текущий контекст выполнения кода. Однако его поведение может быть несколько запутанным, поскольку оно зависит от контекста, в котором оно вызывается. Вот некоторые общие случаи использования this:

This в глобальном контексте:

В глобальном контексте this ссылается на глобальный объект, который обычно является window в браузере или global в среде выполнения Node.js.

console.log(this === window); // Вернет true в браузере

const obj = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

obj.greet(); // Выведет "Hello, John"

const greetFunction = obj.greet;
greetFunction(); // Выведет "Hello, undefined" или выбросит ошибку в строгом режиме

This в стрелочных функциях:

Стрелочные функции не имеют своего собственного контекста this; вместо этого они наследуют контекст из родительской области видимости.

const obj = {
  name: 'John',
  greet: function() {
    const arrowFunction = () => {
      console.log('Hello, ' + this.name);
    };
    arrowFunction();
  }
};

obj.greet(); // Выведет "Hello, John", потому что стрелочная функция наследует контекст из родительской функции