Самая популярная идиома для выражения функции
Добро пожаловать в JS Bifrost, ваш путь к прочной основе для JavaScript уровня Бога. Это следующая статья из серии. Эта статья посвящена одному из самых популярных шаблонов кодирования под названием «iffy», который представляет собой функцию JavaScript, которая выполняется сразу после создания.
Определение
IIFE - это шаблон кодирования, называемый выражением немедленно вызываемой функции, который является способом выполнения функции JavaScript сразу после ее создания. Также произносится как сомнительный. Давайте посмотрим на традиционный и более широко используемый синтаксис, используемый для объявления IIFE.
The ES6 way:
(() => {
/* statements */
})()
The ES5 way:
(function() {
/* statements */
})()
Синтаксис
Давайте шаг за шагом разберем синтаксис приведенного выше примера:
- Когда JavaScript встречает ключевое слово function в допустимом операторе, он ожидает, что произойдет определение / объявление функции. Чтобы механизм JavaScript не выдавал синтаксическую ошибку, выражение функции создается путем заключения определения функции в круглые скобки. Заключительные скобки будут внутренне рассматриваться как выражение.
2. В качестве альтернативы существует другой вариант написания IIFE:
!function() {
alert("Hello, I am an IIFE!");
}();
// Prints Hello, I am an IIFE!
Оператор «!» в качестве префикса сообщает JavaScript, что «все, что находится после оператора not, является частью выражения. (Вы можете заменить «!» любым унарным оператором, который превратит эту функцию в выражение.) Но этот вариант не вернет никакого значения из IIFE.
3. В конце определения добавьте еще одну пару круглых скобок, которые называются вызывающими скобками и точкой с запятой. Вызывающие скобки - это то, что сообщает компилятору, что выражение функции должно быть выполнено немедленно.
Example1:
(function() {
/* statement */
}());
Example2:
(function() {
/* statement */
})();
«()» для вызова функционального выражения помещается либо внутри, либо за пределы круглых скобок для выражения функции.
Анонимный или именованный?
Функции IIFE - это анонимные функции. Согласно определению, анонимная функция не имеет идентификатора. Это функциональное выражение, которое не требует имени.
Обертывающие скобки будут рассматривать то, что находится внутри, как выражение и немедленно вычислить, чтобы вернуть значение.
Их также можно назвать функциями. Однако в наличии имени нет необходимости, поскольку IIFE нельзя ссылаться / вызывать более одного раза после их выполнения. (Помимо имени функции, отображаемого в трассировке стека).
(function foo() {
/* statements */
})();
Быстрый пример, показывающий, что IIFE также могут принимать аргументы при их вызове. Теперь мы передаем аргумент IIFE, когда выполняем его.
(function(myTxt) {
console.log(myTxt);
})(“Hello!, I am an IIFE”);
// Prints Hello!, I am an IIFE
Почему?
IIFE полезны, потому что они не загрязняют и не перезаписывают глобальный объект, и это простой способ изолировать объявления переменных.
- Конфиденциальность данных - IIFE имеют свою собственную область действия, т.е. переменные, которые вы объявляете в выражении функции, не будут доступны вне функции.
(function () {
var myName = "John";
})();
// Variable myName is not accessible from the outside scope
// myName throws "Uncaught ReferenceError: myName is not defined"
Эти переменные теперь привязаны к содержащейся функции, потому что переменные var будут привязаны к функции, и они не будут доступны в глобальной области.
- Отсутствие конфликта имен - функции и переменные, определенные внутри IIFE, не конфликтуют с другими функциями и переменными, даже если у них такое же имя.
Если у вас много глобальных переменных и функций с одинаковыми именами, движок JavaScript освободит только выделенную для них память до тех пор, пока глобальный объект не потеряет область видимости. Глобальные переменные и функции, скорее всего, вызовут конфликты имен. При использовании IIFE определение переменных внутри функций или в фигурных скобках делает их недоступными для глобального пространства имен, что помогает минимизировать загрязнение глобальной области видимости.
При присвоении IIFE переменной сохраняется возвращаемое значение функции, а не само определение функции.
var MyVar = (function () {
var myName = "John";
return name;
})();
// Immediately creates the output // "John"
Прицел ES6 Block - это новый IIFE
В ES6 ключевые слова const и let позволяют разработчикам объявлять переменные в области действия блока, что означает, что эти переменные существуют только в пределах соответствующего блока. Когда вы объявляете глобальную переменную с помощью ключевого слова var, вы добавляете эту переменную в список свойств глобального объекта. В случае веб-браузера глобальным объектом является window. Однако, когда вы используете let or const ключевые слова для объявления переменной, эта переменная не прикрепляется к глобальному объекту как свойство. Следовательно, переменные будут иметь свою собственную область видимости и не позволят вам повторно объявить их, сделав ваши данные конфиденциальными.
{
const myName = 'John';
console.log(myName);
}
Это поможет, когда вы хотите сделать свой код приватным, чтобы ничего не просачивалось в глобальную область видимости окна.
Вывод
Наиболее распространенные варианты использования IIFE:
- Создание частных переменных и функций.
- Минимизация загрязнения глобальной области видимости из-за конфликтов имен.
Это все, что нужно знать о IIFE, чтобы начать использовать их в своем коде.
Посмотрите это пространство, чтобы добиться большего прогресса на пути к «божественному уровню JavaScript» с помощью «JS Bifrost».
