THIS

Конструкция не самая популярная, но важная, если хочешь не просто писать код, а понимать как он работает, НО

Для начала, если ты

▫️ пишешь на React, это тебе нужно только для общего понимания как работает язык
▫️ пишешь на ReactNative, то аналогично с фронтендом
🔺 пишешь бекенд, особенно используя Express, TypeORM, Sequelize - это стоит понимать

А теперь к теории...)

Наверняка (хотя мб и нет, если твой код в основном на стрелочных функциях и функциональных объектах)
в своей практике ты сталкивался с тем, что функция что-то пытается вытащить из this:

const settings = {
  mode: "dark",
  logMode() {
    console.log(`Режим: ${this.mode}`);
  },
};

settings.logMode(); // Режим: dark

Сегодня хочу разобрать на что этот объект ссылается и чем это точно не является

————

Чем THIS не является:

🔸 Это НЕ ссылка функции на саму себя
🔸 Это НЕ указатель на лексическую область видимости функции

Тогда что же такое THIS и куда оно нас отошлет при вызове?

this определяется не во время написания кода, а в момент вызова функции.

Когда функция вызывается — создается "контекст выполнения" (execution context).
В нем формируется ссылка this, основываясь на том, как именно была вызвана функция.

Определяем, на что эта ссылка указывает

4 правила определения this (из книги YDKJS):

1️⃣ new — создается новый объект → this = новый объект
2️⃣ call, apply, bind — this = переданный объект
3️⃣ Вызов через объект — this = сам объект
4️⃣ По умолчанию — this = undefined (в strict) или global (в обычном режиме)

📖 Хочешь понять тему глубже?
Вот глава из YDKJS на русском

Тема очень обширная и вставлять примеры кода не буду, т.к. пост разрастется до огромных масштабов, но все это есть в статье по ссылке выше
--------

⚠️ this требует внимания — особенно при передаче функций или колбэков. Но он может избавить от громоздких конструкций и сделать код элегантнее

——

🧠 Про стрелочные функции, а также разницу между bind, call и apply — расскажу в отдельных постах.

#JS #Middle #this