Любой, кто хоть что-то знает о 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