JS Контекст

В этой части учебника мы разберём как что такое контекст выполнения в JavaScript, думаю будет интересно.

JS контекст выполнения:

Для обрушения к контексту нужно использовать ключевое слово this, давайте сначала покажу простой пример:

Теперь откроем консоль браузера и вот что мы увидим:

Контекст Windows

Таким образом мы получили контекст нашей страницы или глобальный, как его ещё называют, всё потому что мы вызвали его не внутри какой либо функции.

Если мы раскроем в консоли его, то мы сможем найти нашу созданную функцию:

Наша функция в глобальном контексте js

Как видите на скриншоте, у нас в контексте есть наша функция, которую мы создали в глобальной области видимости.

Точно также если мы вызовем контекст внутри функции, то получим при вызове именно её контекст, вот пример:

Как видите мы теперь выводим контекст внутри функции, вот что у нас выводиться в консоли браузера:

Ещё один контекст в JavaScript

То есть у нас опять выводиться глобальный контекст, так происходит потому что мы вызываем функцию в глобальной области видимости.

Давайте попробуем теперь вызывать эту функцию внутри не большого объекта:

Как видите теперь мы вызываем её в качестве метода объекта, и убрали назначение имени внутри функции, и вот что должно получиться:

Вызов функции в другом контексте

Как видите теперь у нас вызывается контекст нашего объекта, который мы только что создали и  имя которое находиться в объекте.

То есть мы можем сделать такой вывод, что если вызывать функцию внутри объекта или класса, то он будет принимать его контекст, иначе будет выводить в глобальном контексте.

Изменение контекста в JS:

Последние что наверное стоит разобрать, так это как менять контекст для функции, так как иногда могут быть ситуации, что нужно вызывать в другом контексте.

Для этого в JS есть три функции, вот они:

  • fun.call(context, arg1, arg2, …) — Вызывает функцию в контексте, параметр context, это контекст в котором нужно запускать, а arg...  это параметры функции если они требуются;
  • fun.apply(context, [arg1, arg2, …]) — Аналогична call(), только параметры для функции храниться в массиве;
  • fun.bind(context, arg1, arg2, …) — Аналогична call(), но уже не вызывает, а возвращает функцию в новом контексте;

Давайте посмотрим как это работаете, вот не большой пример:

Давайте немного разберём этот код, в начале мы создаём функцию которая будет выводить имя, фамилию и метод через который мы меняем контекст.

Потом мы создаём три объекта, которые будут у нас выступать в качестве нового контекста, дальше вызываем функцию в новых контекстах через apply() и call().

Последние мы создаём новую функцию с новым контекстом fun2() через bind() и вызываем её, вот что должно получиться:

Контекст выполнения изменён в JavaScript

Как видите всё работает и выводиться, надеюсь вам было понятно как это работаете.

Вывод:

В этой статье мы показали как контекст выполнения в JavaScript, зачем нужен и как используется изменение его.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Дополнительно:

55058653