Любой, кто хоть что-то знает о JavaScript, знает, что все дело в объектах. Ключевое слово this в объектно-ориентированном языке программирования не является исключением.
Верно. Вы уже догадались — «это» — объект!
Что делает ключевое слово уникальным, так это то, что «это» постоянно меняется. Он постоянно используется для указания на разные объекты в вашем коде. Поначалу его плавность может показаться пугающей, но если вы потратите время, чтобы полностью понять «это», его использование может быть весьма полезным для разработчика.
"this" в качестве объекта окна
Если бы вы открыли свою консоль прямо сейчас и, не написав ни единой строки кода, записали бы «это» в свою консоль, вас приветствовал бы глобальный или оконный объект.
Например:
Это потому, что «это» по умолчанию относится к объекту окна. Но на самом деле ценность «этого» определяется тем, как выполняется код, который вы пишете. «Среда (или область действия), в которой выполняется строка, называется контекстом выполнения. Среда выполнения JavaScript поддерживает стек этих контекстов выполнения, и контекст выполнения, находящийся наверху этого стека, — это тот, который выполняется в данный момент. Объект this
ссылается на изменения каждый раз, когда изменяется контекст выполнения» (Паван).
this в функциях (функции-конструкторы)
Мы узнали, что объект, на который ссылается «это», зависит от объема, в котором он находится. Однако более конкретное определение при работе с «this» в функциях будет заключаться в том, что «this» ссылается на объект, который выполняет текущую функцию.
Чтобы лучше понять это, посмотрите на следующий код. Как вы можете видеть в этом примере, внутри объекта создается функция. Когда «это» регистрируется в функции, это относится к самой внешней области. Областью действия в данном случае является созданный нами объект под названием dance. Поэтому объект dance регистрируется в консоли.
Помните: если функция является методом объекта, this представляет объект.
Функции конструктора:
Функция-конструктор полезна, когда вы хотите создать несколько похожих объектов с одинаковыми свойствами и методами. «Существует соглашение писать имена конструкторов с заглавной буквы, чтобы отличать их от обычных функций» (Кельхини).
Функции-конструкторы — это своего рода функции, в которых используется ключевое слово «новое». Их важно обсуждать, потому что «это» играет в них фундаментальную роль.
Например:
В этом примере this теперь привязано к экземпляру Food.
«это» с методами (.call, .apply.bind)
Три наиболее известных метода, связанных с this, состоят из .call, .apply и .bind и используются для управления вызовом функции.
.call и .apply:
.call и .apply используются для немедленного вызова функции.
Первый параметр в каждом устанавливает this для объекта, который вызывается функцией. «Единственное отличие apply()
от метода call()
заключается в том, что второй параметр метода apply()
принимает аргументы фактической функции в виде массива» (Паван).
Посмотрите пример синтаксиса для .call и .apply ниже.
.bind:
.bind — довольно изящная функция, и она действительно нужна, как и следовало ожидать, основываясь на ее имени.
.bind связывает вызванную функцию с правильным контекстом исходной функции. «this» используется внутри привязки для объявления этой исходной функции. Этот метод может быть особенно полезен, когда необходимо вызвать функцию позже.
Ознакомьтесь с примером синтаксиса .bind, который используется ниже.
Я надеюсь, что этот пост помог читателю лучше понять «это» и его роль в JavaScript. Это может быть очень полезно для разработчиков! Начало включения «этого» в свой код может выделить его функциональность среди кода другого разработчика.
Спасибо за чтение!
Полезные ссылки:
Паван: https://medium.com/better-programming/understanding-the-this-keyword-in-javascript-cb76d4c7c5e8
Кельхини: https://css-tricks.com/understanding-javascript-constructors/
Программирование с помощью Mosh: https://www.youtube.com/watch?v=gvicrj31JOM