🤔 От чего зависит this ?

Значение this зависит от контекста, в котором функция вызывается. Понимание того, как this определяется в различных ситуациях, является ключом к правильному использованию функций и методов в JavaScript. Рассмотрим основные правила и примеры.

🚩Основные правила

Глобальный контекст или контекст функции:
В глобальном контексте (вне любой функции) или внутри обычной функции (не метода объекта) this ссылается на глобальный объект, который является window в браузере или global в Node.js.

      console.log(this); // window в браузере или global в Node.js

   function globalFunction() {
     console.log(this); // window в браузере или global в Node.js
   }
   
   globalFunction();

Методы объекта:
Когда функция вызывается как метод объекта, this ссылается на объект, который использовался для вызова метода.

      const obj = {
     name: 'Alice',
     greet: function() {
       console.log(this.name);
     }
   };
   
   obj.greet(); // 'Alice'

Конструкторы и классы:
this ссылается на вновь созданный объект.

      function Person(name) {
     this.name = name;
   }
   
   const person = new Person('Bob');
   console.log(person.name); // 'Bob'
   
   class Animal {
     constructor(name) {
       this.name = name;
     }
   }
   
   const animal = new Animal('Charlie');
   console.log(animal.name); // 'Charlie'

Явное задание this с помощью call, apply и bind:
Методы call и apply позволяют вызывать функцию с явно заданным значением this. Метод bind создает новую функцию, которая при вызове имеет определенное значение this.

function sayHello() {
     console.log(this.name);
   }
   
   const person = { name: 'David' };
   
   sayHello.call(person); // 'David'
   sayHello.apply(person); // 'David'
   
   const boundSayHello = sayHello.bind(person);
   boundSayHello(); // 'David'

🚩Значение this зависит от контекста вызова:

🟠В глобальном контексте и обычных функциях this ссылается на глобальный объект (window или global).
🟠В методах объекта this ссылается на сам объект.
🟠В конструкторах и классах this ссылается на вновь созданный объект.
🟠С помощью call, apply и bind можно явно задать значение this.
🟠Стрелочные функции захватывают this из окружающего лексического контекста.
🟠Вложенные функции могут иметь различное значение this, что можно решить с помощью стрелочных функций или сохранения контекста внешней функции.

Ставь 👍 и забирай 📚 Базу знаний