Ключевое слово (параметр) this в JavaScript функциях понятным языком

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

Итак. This — это ключевое слово, но я не зря указал в заголовке слово «параметр», так как много начинающих программистов почему-то пишут и ищут что такое this, используя слово параметр. Почему? Я не знаю, но, чтобы такие люди попадали на мою статью, я решил внедрить это название в мой заголовок. Сразу спешу отметить, что есть довольно исчерпывающая статья про this здесь. И я в этой статье тоже не буду описывать Вам полностью это ключевое слово, а остановлюсь на самых главных примерах, которые Вы можете использовать или встречать в коде уже сейчас.

This — это ключевое слово, которое указывает на объект. Так как все, что мы видим в программировании есть объекты, в связи с этим ключевое слово this указывает на объект. В глобальном плане оно указывает на объект window. В данной статье мы рассмотрим использование this именно в функциях. Давайте разберем первый пример.

<input onchange="myFun(this)" />

Как мы видим это обычный html код, Вы можете его вставить в html файл в любой, будем работать на этот конкретном примере. Итак, что мы видим? Правильно, есть input, куда можно вписывать все, что угодно. У него есть событие onchange, которое срабатывает после снятия фокуса с input после изменения его. Так вот, при изменении данных в этом input, мы будем вызывать функцию myFun(), с параметром this. Что же такое мы передали в параметры? Мы передали объект input, а ключевое слово указывает, что передаем в функцию наш собственный объект. Обратите внимание, что Вы может использовать такое везде, где Вам нужно, this будет ссылаться на ближайший объект. в котором находится. Давайте теперь немного расширим наш код, добавим функцию.

<input onchange="myFun(this)" />
<script>
function myFun(argument) {         
alert(argument.value);     
} 
</script>

Посмотрите на функцию, как видим мы передаем в функцию наш объект input. У каждого объекта есть определенные атрибуты и методы. У input список атрибутов довольно обширный, среди них есть и value, которое содержит значение того, что вводим в форму. С помощью функции alert() выводим наши значения, что вводим в input на экран пользователя.

Задавайте свои вопросы в комментариях, буду расширять эту статью и показывать больше примеров, если необходимо. Также не забывайте подписываться на мой канал в Telegram, где можно послушать хорошую музыку. И не забывайте про остальные статьи на тему Javascript на моем сайте. Уверен, тоже найдете что-нибудь новое для себя.