Как сделать самовызывающуюся функцию js
Замыкания и самовызывающиеся функции
Замыкания и самовызывающиеся функции
Здравствуйте! Продолжаем изучать функции в JavaScript. И в этом уроке мы с вами рассмотрим такое понятие как замыкание функции и так называемые IIFE функции или самовызывающиеся функции. Итак давайте начинать.
Замыкания функции
Замыкания представляют собой ссылку на локальную переменную, которая создана одной функции, но при этом может использоваться в другой части программы. Кажется немного сложновато давайте рассмотрим на примере.
В примере вызов функции multi приводит к вызову внутренней функции. Эта функция function(m) < return y * m; >запоминает окружение в котором она была вызвана, в частности значение переменной y.
После этого мы первый раз вызываем функцию, задавая переменную func1, которая как раз и представляет из себя замыкание (объединяет в себе функцию и окружение, в котором она была вызвана). А вот собственно окружение состоит из любой локальной переменной (о локальных и глобальных переменных читайте здесь) которая была создана в самой функции, в нашем примере это переменная y.
Таким образом func1 содержит и внутреннюю функцию и тут очень важно не запутаться в параметрах при первом вызове функции multi мы передаем аргумент во внутреннюю функцию, а уже в переменной res1 будет результат, который возвратит внутренняя функция.
Можно оптимизировать наш пример без создания второй переменной.
Как видно из примера параметры можно передавать в двух круглых скобках.
Самовызывающиеся функции или IIFE функции
Самовызывающиеся функции — это функции, которые способны вызывать сами себя. Их также называют Immediately Invoked Function Expression (IIFE). Давайте рассмотрим на примере.
Такие функции как правило не надо вызывать они вызывают сами себя. Обычно это надо для инкапсуляции переменных и методов. Более подробно разберем на объектно-ориентированном программировании в JavaScript.
Итоги.
Замыкание — это функция вместе со всеми локальными переменными, которые ей доступны.
Самовызывающиеся функции — это функции, которые могут сразу же вызывать сами себя.
Задания
Что будет в результате работы функции
Какой результат выполнения данного кода и почему?
Перекрытие внешней переменной
Если у вас во внутренней функции есть своя переменная count. Можно ли в ней получить count из внешней функции.
И в заключении смотрите видеоурок по замыканиям в функции.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Функциональное выражение и стрелочные функции в JavaScript
В JavaScript создавать функцию кроме классического способа (Function Declaration) можно ещё посредством:
Создание функции с использованием синтаксиса Function Expression
Например, создание функции sum с использованием «классического» синтаксиса (Function Declaration) и Function Expression:
Вызов функции, созданной через Function Expression, выполняется посредством указания имени переменной, содержащей эту функцию и круглых скобок, внутрь которых при необходимости можно передать аргументы.
При объявлении функции посредством Function Expression дополнительно указывать имя функции после ключевого слова function не нужно.
Его имеет смысл использовать только в том случае, если вы хотите её вызвать внутри её кода. Т.е. создать рекурсию. Вызвать эту функцию по этому имени в другом месте нельзя.
Но вызвать функцию внутри её тела можно также с помощью свойства arguments.callee :
Самовызывающаяся функция (IIFE)
Она используется для создания закрытой области видимости, и применяется в паттерне «модуль».
Для создания самовызывающейся функции, её необходимо обернуть в круглые скобки, а затем её вызвать, т.е. разместить ещё скобки, передав в них при необходимости аргументы.
Стрелочные функции (arrow function)
Базовый синтаксис стрелочной функции:
Например, функция возвращающая среднее арифметическое двух чисел:
Если стрелочная функция простая, т.е. она просто вычисляет выражение как в предыдущем примере, то её можно записать ещё короче:
Пример, в котором создадим стрелочную функцию, возвращающую массив определённой длины, заполненный случайными числами от 0 до 9.
При создании стрелочной функции с одним параметром круглые скобки можно не указывать:
Если стрелочная функция не имеет параметров, или их два и более, то круглые скобки в этом случае нужно писать обязательно:
До появления стрелочных функций каждая функция имела свой this (контекст в котором она выполнялась).
Чтобы в setInterval нам получить ссылку на этот объект, нам приходилось сохранять её в другую переменную, например that :
Отличия между различными способами объявления функций
Отличия между Function Declaration, Function Expression и Arrow Function:
1.1. Function Declaration – по имени, после которого нужно указать круглые скобки:
1.2. Function Expression – по имени переменной, после которой следует указать круглые скобки:
1.3. Arrow Function – по имени переменной, после которой следует указать круглые скобки:
2. Всплытие (hoisting)?
2.1. Функции Function Declaration всплывают (hoisting), их можно вызывать до объявления:
При сохранении функции в переменную, объявленную с помощью ключевого слова var будет происходить следующее:
3. Видимость функции вне блока в строгом режиме ( ‘use strict’ )?
3.1. При использовании ‘use strict’ функция, объявленная как Function Declaration, будет видна только внутри блока, в котором она объявлена.
3.2. В отличие от Function Declaration, доступ к функции можно получить вне блока, в котором она создана (но только, если она сохранена в переменную, созданную с помощью ключевого слова var ):
3.3. Поведение стрелочной функции аналогично Function Expression.
Анонимные самовызывающиеся функции и функции обратного вызова в JavaScript.
Всем привет! Недавно мы рассмотрели различия между function declaration и function expression, сегодня мы рассмотрим, как использовать анонимные самовызывающиеся функции и функции обратного вызова.
Функции обратного вызова
Рассмотрим такой код
var func = function(callback) <
var name = ‘Ivan’;
callback(name);
>
Здесь мы передаем в функцию другую функцию, которую потом вызываем. Вот так теперь мы можем использовать наш код.
func(function(n) <
alert(‘Привет, ‘ + n);
>);
Мы определили свою функцию, которая передается в параметре. Такой тип функций называется «функции обратного вызова» или callback по-английски.
Самовызывающиеся функции
Как понятно из названия, такие функции вызываются сами.
Рассмотрим небольшой пример
var greeting = (function(name) <
return ‘Привет, ‘ + name;
>)(‘Ivan’);
Как вы можете видеть, мы обернули функцию в круглые скобки, после чего снова поставили круглые скобки в конце функции и передали туда нужный аргумент. Такая функция вызовется сразу же, как до нее дойдет интерпретатор, поэтому мы увидим «Привет, Ivan», хотя мы данную функцию не вызывали.
Такие функции также очень часто используются на практике.
Например, такой тип функций используется для реализации паттерна модуль.
Итак, на этом все. Спасибо за внимание и удачи!
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как сделать самовызывающуюся функцию js
Замыкания
Замыкание ( closure ) представляют собой конструкцию, когда функция, созданная в одной области видимости, запоминает свое лексическое окружение даже в том случае, когда она выполняет вне своей области видимости.
Замыкание технически включает три компонента:
переменные (лексическое окружение), которые определены во внешней функции
вложенная функция, которая использует эти переменные
Рассмотрим замыкания на простейшем примере:
Здесь функция outer задает область видимости, в которой определены внутренняя функция inner и переменная x. Переменная x представляет лексическое окружение для функции inner. В самой функции inner инкрементируем переменную x и выводим ее значение на консоль. В конце функция outer возвращает функцию inner.
Далее вызываем функцию outer:
Далее мы фактически три раза вызываем функцию Inner, и мы видим, что переменная x, которая определена вне функции inner, инкрементируется:
То есть несмотря на то, что переменная x определена вне функции inner, эта функция запомнила свое окружение и может его использовать, несомотря на то, что она вызывается вне функции outer, в которой была определена. В этом и суть замыканий.
Рассмотрим еще один пример:
Итак, здесь вызов функции multiply() приводит к вызову другой внутренней функции. Внутренняя же функция:
запоминает окружение, в котором она была создана, в частности, значение переменной x.
То есть fn1 — это замыкание, которое содержит и внутреннюю функцию function(m) < return x * m;>, и переменную x, которая существовала во время создания замыкания.
При этом важно не запутаться в параметрах. При определении замыкания:
Число 5 передается для параметра n функции multiply.
При вызове внутренней функции:
Также мы можем использовать другой вариант для вызова замыкания:
Самовызывающиеся функции
Обычно определение функции отделяется от ее вызова: сначала мы определяем функцию, а потом вызываем. Но это необязательно. Мы также можем создать такие функции, которые будут вызываться сразу при определении. Такие функции еще называют Immediately Invoked Function Expression (IIFE).
Подобные функции заключаются в скобки, и после определения функции идет в скобках передача параметров.
Анонимные и самовыполняющиеся функции в JavaScript
Дата публикации: 2016-10-05
От автора: JavaScript позволяет создавать, кроме обычных, также и анонимные функции, выполняющие важную роль в JavaScript.
Анонимность каждый день
Вы, скорее всего, уже встречались с анонимными функциями. Они входят в колбэк функции.
У функции в обработчике события нет имени, она анонимна. Анонимные функции зачастую создаются и сразу же запускаются, так как находятся внутри колбэк функций. Еще одно важное отличие в том, что именованные функции объявляются, а анонимные создаются при помощи оператора function. Анонимные функции могут выступать в качестве значения переменной:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Таким образом, к функции можно обращаться по переменной, но сама функция остается анонимной. В качестве значения переменной также можно указать именованную функцию. С анонимными функциями все то же самое, они даже лучше подходят для таких целей.
Отличие от обычных функций
Важное отличие анонимных функций в том, что они должны объявляться до их вызова. Можете вспомнить нашу первую статью в серии. Там сказано, что обычные функции можно объявлять и вызывать в любом месте. Браузер парсит код перед его выполнением, подхватывая именованные функции по пути. Сам факт того, что функции должны прописываться в начале скрипта, лишь условность и хорошая практика программирования. Анонимная функция создается в момент ее запуска в скрипте, не во время парсинга, поэтому ее нельзя прописать после ее вызова в коде.
Способы применения анонимных функций
У анонимных функций нет имени, поэтому они короче и их легче писать, если вам не нужно ссылаться на них в коде. По этой причине их и используют в колбэк функциях. Есть еще одна интересная особенность: в определенной записи такие функции могут вызывать сами себя.
Техника называется самовыполняющиеся функции. Эффект создается пустыми скобками в конце функции, которые говорят браузеру, что эту функцию необходимо запустить как можно быстрее. Такая запись может показаться лишней, обычный JS также запустит функцию, когда дойдет до нее в коде. Так зачем использовать такую странную запись?
Главная причина – область видимости функции. Можете вспомнить из прошлой статьи, что переменная, объявленная внутри функции, может быть вызвана только внутри этой функции. В остальном коде данная переменная не видна. Точно так же переменная внутри самовыполняющейся функции замыкается внутри этой функции. Такую переменную нельзя случайно вызвать из внешнего кода или переписать. Такая техника аккуратно инкапсулирует переменные и код, пряча их от глобального пространства имен, чтобы они не вступили в конфликт с другим кодом. По такой же схеме часто пишутся полифилы и плагины, в виде самовыполняющихся функций.
Заключение
Поняв суть анонимных и самовыполняющихся функций, вы сможете передавать функции в переменных и перестроить код по модулям. Функции такого рода можно использовать также и для создания и возврата других функций. Тут речь уже заходит о замыкании, о котором мы поговорим в следующей статье.
Редакция: Команда webformyself.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения