Как определяется this в JavaScript?

1️⃣ Как кратко ответить

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

2️⃣ Подробное объяснение темы

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

Глобальный контекст

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

console.log(this); // В браузере выведет объект window

Контекст объекта

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

const person = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};
​
person.greet(); // Выведет: Hello, Alice

В этом примере this.name ссылается на свойство name объекта person.

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

В функциях-конструкторах this ссылается на новый объект, который создается при вызове конструктора.

function Person(name) {
  this.name = name;
}
​
const bob = new Person('Bob');
console.log(bob.name); // Выведет: Bob

Здесь this.name = name; устанавливает свойство name нового объекта, который создается при вызове new Person('Bob').

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

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

const person = {
  name: 'Alice',
  greet: function() {
    const innerFunction = () => {
      console.log('Hello, ' + this.name);
    };
    innerFunction();
  }
};
​
person.greet(); // Выведет: Hello, Alice

В этом примере this внутри innerFunction ссылается на объект person, потому что стрелочная функция наследует this из функции greet.

Явное задание this

JavaScript предоставляет методы call, apply и bind для явного задания значения this.

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

function greet() {
  console.log('Hello, ' + this.name);
}
​
const person = { name: 'Alice' };
​
greet.call(person); // Выведет: Hello, Alice

В этом примере greet.call(person) вызывает функцию greet с this, установленным на объект person.

Понимание того, как определяется this, позволяет более эффективно использовать функции и методы в JavaScript, избегая распространенных ошибок, связанных с контекстом вызова.