Что такое ключевое слово 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
. Просто освоите концепции, изложенные в этой статье, и вы больше никогда не запутаетесь.
Помогла ли вам эта статья? Если да, надеемся, что вы поделитесь ею.
Спасибо за внимание!
Последние посты
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее
Стивен Кинг
Жизнь – это непрерывный опыт, и даже самые плохие моменты занимают свое место в пазле… Читать далее
неизвестный автор
Люди, которые любят одиночество, дорого заплатили за дружбу с кем-то... неизвестный автор Читать далее