Что такое ключевое слово 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. Просто освоите концепции, изложенные в этой статье, и вы больше никогда не запутаетесь.

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

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

 

Последние посты

Как создавать умные торговые кампании через Merchant Center?

Интеграция Merchant Center с Google Рекламой открывает доступ к такому эффективному типу кампаний, как Умные…

29/05/2024

Портер: темное, крепкое, рожденное в Лондоне

Английским словом porter (в переводе — носильщик) называют разновидность пива, появившуюся в Британской столице в…

28/05/2024

Фридрих Ницше

Если вы решили действовать — закройте двери для сомнений Фридрих Ницше  

26/05/2024

Стивен Кинг

Любая проблема в жизни — это проверка наших возможностей Стивен Кинг  

21/05/2024

Уинстон Черчилль

Пессимист видит трудности в каждой возможности; оптимист в любых трудностях видит возможности Сэр Уинстон Леонард…

19/05/2024

Конфуций

Когда вам покажется, что цель недостижима, не изменяйте цель — изменяйте свой план действий Конфуций…

12/05/2024