В этой части учебника мы разберём как что такое контекст выполнения в JavaScript, думаю будет интересно.
JS контекст выполнения:
Для обрушения к контексту нужно использовать ключевое слово this, давайте сначала покажу простой пример:
1 2 3 4 5 6 7 | // Создаём функцию function fun () { console.log("Это функция"); } // Выводим контекст в консоль браузера console.log(this) |
Теперь откроем консоль браузера и вот что мы увидим:
Таким образом мы получили контекст нашей страницы или глобальный, как его ещё называют, всё потому что мы вызвали его не внутри какой либо функции.
Если мы раскроем в консоли его, то мы сможем найти нашу созданную функцию:
Как видите на скриншоте, у нас в контексте есть наша функция, которую мы создали в глобальной области видимости.
Точно также если мы вызовем контекст внутри функции, то получим при вызове именно её контекст, вот пример:
1 2 3 4 5 6 7 8 9 10 11 12 | // Создаём функцию function fun() { // Имя в контексте this.name = "Вася" // Выводим имя console.log("Моё имя " + this.name); // Выводим контекст console.log(this) } // Вызываем функцию fun() |
Как видите мы теперь выводим контекст внутри функции, вот что у нас выводиться в консоли браузера:
То есть у нас опять выводиться глобальный контекст, так происходит потому что мы вызываем функцию в глобальной области видимости.
Давайте попробуем теперь вызывать эту функцию внутри не большого объекта:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Создание функции function fun() { // Вывод имени console.log("Моё имя " + this.name); // Вывод контекста console.log(this) } // Создаём объект const obj = { name: "Вова", myName: fun } // Вызываем метод объекта obj.myName() |
Как видите теперь мы вызываем её в качестве метода объекта, и убрали назначение имени внутри функции, и вот что должно получиться:
Как видите теперь у нас вызывается контекст нашего объекта, который мы только что создали и имя которое находиться в объекте.
То есть мы можем сделать такой вывод, что если вызывать функцию внутри объекта или класса, то он будет принимать его контекст, иначе будет выводить в глобальном контексте.
Изменение контекста в JS:
Последние что наверное стоит разобрать, так это как менять контекст для функции, так как иногда могут быть ситуации, что нужно вызывать в другом контексте.
Для этого в JS есть три функции, вот они:
- fun.call(context, arg1, arg2, …) — Вызывает функцию в контексте, параметр
context, это контекст в котором нужно запускать, аarg...это параметры функции если они требуются; - fun.apply(context, [arg1, arg2, …]) — Аналогична
call(), только параметры для функции храниться в массиве; - fun.bind(context, arg1, arg2, …) — Аналогична
call(), но уже не вызывает, а возвращает функцию в новом контексте;
Давайте посмотрим как это работаете, вот не большой пример:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | // Создаём функцию function fun() { // Выводим имя console.log("Моё имя " + this.name); // Выводим фамилию console.log("Моя фамилия " + this.surname); // Выводим через что добавляем новый контекст console.log("Контекст " + this.context); // Выводим контекст console.log(this) } // Первый контекст const context1 = { name: "Вася", surname: "Пупкин", context: "apply" } // Второй контекст const context2 = { name: "Вова", surname: "Кузнецов", context: "call" } // Третий контекст const context3 = { name: "Дмитрий", surname: "Крутов", context: "bind" } // Вызываем функцию с первым контекстом fun.apply(context1); // Вызываем функцию со вторым контекстом fun.call(context2); // Создаём второю функцию с третьим контекстом let fun2 = fun.bind(context3) // Вызываем созданную функцию fun2() |
Давайте немного разберём этот код, в начале мы создаём функцию которая будет выводить имя, фамилию и метод через который мы меняем контекст.
Потом мы создаём три объекта, которые будут у нас выступать в качестве нового контекста, дальше вызываем функцию в новых контекстах через apply() и call().
Последние мы создаём новую функцию с новым контекстом fun2() через bind() и вызываем её, вот что должно получиться:
Как видите всё работает и выводиться, надеюсь вам было понятно как это работаете.
Вывод:
В этой статье мы показали как контекст выполнения в JavaScript, зачем нужен и как используется изменение его.
Подписываетесь на соц-сети:
Оценка:
Загрузка...