Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 18.11.2022)
83460
солдат
278
самолетов
261
вертолетов
2879
танков
5808
ББМ
1865
артиллерия
209
ПВО
393
РСЗО
4366
машин
16
корабли и катера
Что такое ключевое слово this в JavaScript

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

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

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован.