Что такое ключевое слово this в JavaScript

Если вас смущает ключевое слово this в JavaScript, знайте, что вы не одиноки. Вначале это смущает всех программистов. Но это не значит, что вам не нужно разобраться в этом. Ключевое слово this используется так часто в учебниках и в коде JavaScript, что вам нужно в нем разобраться. Как только вы освоите ключевое слово this, вы поймете, что это намного проще, чем вы думали.

Из этой статьи вы узнаете, что такое ключевое слово this в JavaScript, что оно делает и как его использовать.

Так что же это такое ключевое слово this?

this – это ключевое слово, значение которого изменяется в зависимости от того, как вызывается функция. Есть такие основные вариации, где оно может принимать различные значения:

this в глобальном контексте
this в конструкторе объекта
this в методе объекта
this в простой функции
this в слушателе событий

Давайте посмотрим, как this меняется в каждом из этих контекстов.

this в глобальном контексте

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

console.log(this); // объект Window

Как правило, вам не нужно использовать this в глобальном контексте, так что его значение здесь не важно. Давайте перейдем к следующему контексту.

this в конструкторе объекта

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

function Human(age) {
  this.age = age;
}
let ivan = new Human(22);
let stepan = new Human(24);
console.log(ivan); // this.age = 22
console.log(stepan); // this.age = 24

Выше в коде ivan является экземпляром Human. Теперь, когда бы вы ни ссылались на ivan, вы случайно не получите stepan. Таким образом, установка this в качестве примера имеет смысл.

Давайте посмотрим на тесно связанный контекст далее – this в методе объекта.

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

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

function Human(name) {
  return {
   name,
   getName() {
    return this.name;
   }
  }
}
const ivan = new Human('Ivan');
const stepan = new Human('Stepan');
console.log(ivan.getName()); // Ivan

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

Давайте перейдем к следующему контексту.

this в простой функции

Ниже пример простой функции:

function hello() {
  // say hello!
}

Браузеры this в простой функции всегда устанавливают в Window. То же самое верно, даже если вы вызываете простую функцию в методе объекта.

К сожалению, такое поведение является неожиданным для начинающих. Они ожидают, что this останется тем же самым в методах объекта.

Одним из быстрых решений является создание переменной, которая хранит ссылку на this. Эта переменная часто называется self или that.

this в слушателях событий

Ключевое слово this устанавливается для элемента, который вызвал событие в слушателе событий:

let button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log(this); // button
})

Изменение this с привязкой (bind)

bind – это метод, который присутствует в каждой функции. Это позволяет вам изменить контекст ключевого слова this. Этот метод принимает любое количество аргументов и возвращает связанную функцию.

function sayThis() {
  console.log(this);
}
const boundFunction = sayThis.bind(/* аргументы...*/);

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

function sayThis() {
  console.log(this);
}
const boundFunction = sayThis.bind({greeting: 'hello'});
boundFunction();

Другие параметры, которые вы передаете в bind, будут переданы в качестве аргументов исходной функции

function sayParams(...args) {
  console.log(...args);
}
const boundFunction = sayParams.bind(null, 1, 2, 3, 4, 5);
boundFunction();

Заключительная мысль

Ключевое слово this является одним из важнейших ключевых слов в JavaScript. Оно используется во многих JavaScript-фреймворках, поэтому вы должны знать, что оно делает.

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

Это тот минимум, который вам нужно знать о this. Просто освоите концепции, изложенные в этой статье, и вы больше никогда не запутаетесь.

Помогла ли вам эта статья? Если да, надеемся, что вы поделитесь ею.

Спасибо за внимание!

Теги: JavaScript