Понимание работы ключевого слова «this» в JavaScript

Часто начинающие разработчики на JavaScript сталкиваются с трудностями при использовании ключевого слова «this». Использование «this» может казаться запутанным, поскольку его поведение варьируется в зависимости от контекста, в котором оно используется.

Рассмотрим пример проблемы. Предположим, есть код:

function User(name) {
  this.name = name;
}

User.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
}

const bob = new User('Bob');
bob.sayHello(); 

В этом случае, при вызове bob.sayHello(), this внутри функции sayHello будет ссылаться на объект bob, и код будет работать как ожидается.

Но что, если мы попытаемся сделать следующее:

const sayHelloBob = bob.sayHello;
sayHelloBob(); 

В этом случае, результат будет неожиданным. Вместо предполагаемого «Hello, Bob» получим «Hello, undefined». Это происходит потому что this теперь ссылается не на объект bob, а на глобальный объект (в браузерах это window).

Ключевое слово «this» в JavaScript относится к объекту, в контексте которого вызывается функция. В приведённых выше примерах, это объект bob.

Однако, если функция вызывается не как метод объекта, а как отдельная функция (как в примере с sayHelloBob()), «this» будет ссылаться на глобальный объект.

Исключение составляют стрелочные функции, в которых «this» не привязывается к контексту вызова, а берётся из окружающего лексического контекста.

const user = {
  name: 'Alice',
  sayHello: () => {
    console.log(`Hello, ${this.name}`);
  }
}

user.sayHello(); 

В этом случае this.name будет undefined, поскольку this берётся из глобального контекста, а не из объекта user.

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

Тест на профориентацию

За 10 минут узнайте, как ваш опыт пригодиться в IT индустрии

Подробнее