MYLS (Сделайте вашу жизнь проще)
Понимание концепции «это» в javascript
В этой статье я поделюсь своим пониманием и подходом к тому, как я работаю с объектом this в javascript. Прежде чем углубиться в тему, необходимо понять разницу между следующими типами вызова, потому что ссылка на объект this изменяется в каждом типе вызова.
- Вызов функции
- Вызов метода
- Вызов конструктора
- Вызов / Применить / Связать (C.A.B)
ВЫЗОВ ФУНКЦИИ
В приведенном выше фрагменте кода мы можем увидеть пример вызова базовой функции, которая возвращает полное имя, то есть комбинацию firstName и lastName. При вызове функции this относится к глобальному объекту, и в первой строке я назначил свойство lastName глобальному объекту this.
Если мы используем выражение «use strict» в верхней части нашей программы или внутри функции, это не позволяет нам получить доступ к глобальному объекту. Так что в наши дни люди не предпочитают метод вызова функций.
ПРИЗЫВ МЕТОДА
Первый вопрос, который может прийти вам в голову, - в чем разница между методом и функцией. Когда функция определяется как свойство объектного литерала, мы вызываем эту функцию как метод, или когда мы обращаемся / вызываем функцию из объектного литерала, мы вызываем ее как вызов метода.
В приведенном выше фрагменте кода я пытаюсь вызвать функцию add из объекта obj (obj.add ()), поэтому он представляет собой случай вызова метода. Таким образом, внутри области действия функции добавления this будет относиться к объекту obj, если я попытаюсь получить доступ к свойству value из этого объекта, то есть this.value, он напечатает 5 .
Примечание. При вызове метода объект this не относится к глобальному объекту, а представляет объект (obj), из которого была вызвана функция (add).
В приведенном выше фрагменте кода «Функция внутри функции», если мы напрямую попытаемся распечатать объект «этот» внутри области подфункции, он напечатает глобальный объект [окно объекта], потому что он представляет вызов функции, а не вызов метода.
Чтобы получить доступ к свойствам obj через объект «this», сначала нам нужно назначить этот объект переменной self во внешней области функции, то есть добавить функцию. Вместо self мы могли бы использовать любое другое имя переменной в соответствии с нашими бизнес-требованиями.
Примечание: - В случае вызова метода, если есть сценарий функции внутри функции, и вы хотите получить доступ к свойствам объекта (obj) через 'this' внутри внутренней функции, поэтому вам нужно назначить объект 'this' к переменной (self) во внешней области функции и в дальнейшем использовать эту переменную (self) во внутренней функции для доступа к свойствам объекта (obj).
Выражение return (self.value - self.value), вернет (5–5), то есть 0, потому что self представляет объект 'obj', и мы пытаемся получить доступ к свойству 'value' из переменной self. .
ВЫЗОВ КОНСТРУКТОРА
Конструктор - это в основном функции, которые используются с оператором new для создания одного экземпляра объекта. Несколько встроенных конструкторов JS - это Object, Array и Function.
В приведенном выше фрагменте кода оператор new помещается перед функцией «Behavior», что приводит к вызову конструктора. Экземпляр объекта создается и назначается переменной «b1».
Итак, объект this, написанный внутри функции Behavior, представляет собой экземпляр b1 объекта Behavior. Теперь, если я добавляю / назначаю новые свойства в this, можно получить доступ через объект 'b1'.
Примечание. - В случае вызова конструктора объект this всегда представляет объект b1, созданный путем создания экземпляра конструктора, то есть new Behavior ().
Теперь, если я попытаюсь напечатать b1.mood, я получу сообщение «happy», потому что b1 представляет объект «this» внутри функции «Behavior».
ПОЗВОНИТЬ / ПРИМЕНИТЬ / ПРИВЯЗАТЬ
Основная цель использования call, apply и bind с объектом «this» заключалась в том, чтобы сделать ссылочное значение «this» динамическим, т.е. мы можем присвоить значение «this» любому объекту по нашему выбору.
В случае вызова функции это всегда относится к глобальному объекту.
В случае вызова метода это относится к объекту, из которого мы вызвали функцию, это всегда будет относиться только к этому объекту.
При вызове конструктора this всегда будет ссылаться на объект, созданный путем создания экземпляра конструктора, то есть new Behavior в нашем примере выше.
СПОСОБ ВЫЗОВА
В приведенном выше фрагменте «метод вызова» у нас есть 3 объекта, которые мы передадим в качестве параметров метода вызова. 3 объекта следующие -
- this, который представляет глобальный объект
- person1, который содержит свойство name
- person2, который содержит свойство name
Первый параметр метода call представляет значение this, а второй представляет значение , передаваемое в качестве аргумента функции sayName.
В первом операторе console.log мы назначаем объект global объекту this, записанному внутри функции sayName, поэтому this.name напечатает Michael как это представляет глобальный объект, и метка будет «Глобальной».
Во втором операторе console.log мы назначаем объект person1 объекту this, записанному внутри функции sayName, поэтому this.name напечатает Nicholas как this представляет объект person1, а метка будет "person1".
В третьем операторе console.log мы назначаем объект person2 объекту this, записанному внутри функции sayName, поэтому this.name напечатает Greg как this представляет объект person2, а label будет "person2".
ПРИМЕНИТЬ МЕТОД
Метод apply аналогичен вызову, но единственное различие между методом call и apply заключается в том, что второй параметр передается в виде массива.
Ниже приведен фрагмент кода, показывающий, как реализовать приложение.
В приведенном выше фрагменте мы видим, что второй параметр передается как массив, который является единственной разницей между call и apply. Чтобы получить значение из массива, нам нужно передать то же количество аргументов, что и количество элементов в массиве.
Как видно из первого оператора console.log, мы передали 2 элемента в массиве «Global» и «value», а для того, чтобы распечатать их внутри функции, у нас есть 2 аргумента «label» и «_val».
«label» представляет «Global», тогда как «_val» представляет «значение». То же самое и с другими операторами console.log.
МЕТОД ОБЪЯВЛЕНИЯ
Проверьте приведенный ниже пример кода для bind()
В приведенном выше примере кода для bind() мы возвращаем связанную функцию с контекстом, который будет вызван позже. Мы можем увидеть связанную функцию в консоли, как показано ниже.
Первый параметр метода bind () устанавливает значение «this» в целевой функции при вызове связанной функции. Обратите внимание, что значение для первого параметра игнорируется, если связанная функция создается с использованием оператора «new».
Остальные параметры, следующие за первым параметром в методе bind (), передаются как аргументы, которые добавляются к аргументы, предоставленные связанной функции при вызове целевой функции.
На этом пока все. Спасибо, что прочитали, и я надеюсь, что этот пост будет полезен новичкам.
