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

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

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

 

Recent Posts

Владимир Высоцкий

Я понимаю, как смешно Искать в глазах ответ, В глазах, которым все равно, Я рядом… Read More

25/07/2021

Брюс Ли

Нет такой фразы "Я не могу!" Сумел один, смогут и другие. Не смог никто -… Read More

21/07/2021

Иоганн Вольфганг фон Гете

К чему душе беззлобье, широта уму, Руке готовность действовать и воля, Когда в горячке зла… Read More

12/07/2021

Какой бойлер использовать для кухни

Незаменимым устройством при отключении горячей воды является бойлер для кухни, позволяющий с комфортом мыть посуду… Read More

08/07/2021

Али ибн Абу Талиб

Лучше хранить молчание до тех пор, пока не спросят, чем говорить до тех пор, пока… Read More

07/07/2021

Мухаммад Окар

То, что вы имеете каждый день, кто-то ежедневно вымаливает Мухаммад Окар   Read More

01/07/2021