Для чего используется ключевое слово this внутри функции?

Краткий ответ

Ключевое слово this — это ссылка на объект, который вызвал текущую функцию. Проще говоря, это способ функции понять, “кто ей владеет” или “от чьего имени” она работает. 🎯

Полный ответ

[this] — это одна из важнейших концепций JavaScript, которая часто вызывает путаницу. Давайте разберем всё очень просто! 😊

Что такое this

[this] — это как паспорт функции. Оно показывает, к какому объекту привязана функция:

const user = {
  name: 'Иван',
  greet() {
    console.log('Привет, ' + this.name); // this → user
  }
};

Простые примеры

this в методах объекта

const cat = {
  name: 'Мурка',
  meow() {
    console.log(this.name + ' мяукает'); // 'Мурка мяукает'
  }
};
 
cat.meow(); // this → cat

this в обычных функциях

function showThis() {
  console.log(this); // зависит от режима работы
}
 
showThis(); // undefined (в строгом режиме)

Как работает this

При вызове как метод

const person = {
  name: 'Петр',
  sayName() {
    return this.name; // 'Петр'
  }
};
 
person.sayName(); // this → person

При обычном вызове

const person = {
  name: 'Петр',
  sayName() {
    return this.name;
  }
};
 
const func = person.sayName;
func(); // this → undefined (в строгом режиме) ❌

Когда this полезно

Работа с данными объекта

const counter = {
  value: 0,
  increment() {
    this.value++; // изменяем свойство объекта
  }
};

Универсальные методы

const dog = {
  name: 'Шарик',
  sound: 'гав'
};
 
const bird = {
  name: 'Чижик',
  sound: 'чирик'
};
 
function makeSound() {
  console.log(this.name + ' говорит ' + this.sound);
}
 
// Одна функция работает для разных объектов!
makeSound.call(dog); // 'Шарик говорит гав'
makeSound.call(bird); // 'Чижик говорит чирик'

Частые ошибки

Потеря контекста

const obj = {
  name: 'Иван',
  greet() {
    console.log('Привет, ' + this.name);
  }
};
 
const greetFunc = obj.greet;
greetFunc(); // 'Привет, undefined' ❌

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

const obj = {
  name: 'Иван',
  // Стрелочная функция не имеет своего this
  arrowFunc: () => {
    console.log(this.name); // undefined
  }
};

Простые правила

this — показывает, “кто вызвал функцию” 🎯
В методах — this → объект, у которого вызвали метод 📦
В обычных функциях — this → undefined (в строгом режиме) ⚠️
Потеря контекста — при передаче методов как функций ❌
Стрелочные функции — берут this из внешней области 🏹

Понимание [this] помогает писать более предсказуемый код и избегать ошибок. Это очень важная тема для любого JavaScript разработчика! 💪

Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪