Функции JavaScript

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

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

Функциональные выражения

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

Поместите это объявление в выражение JavaScript (как в присваивании или арифметическом выражении), оно становится функция выражение.

// Объявление функции function function_name () ; // Выражение функции var имя_функции = function () ;

Все объявления JavaScript поднимаются (перемещаются вверх в области видимости) во время оценки. Следовательно, запись вызова функции до объявления функции в порядке (так как объявление все равно будет перемещено вверх).

function_name (); // вызов функции [WORKS] function function_name () ;

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

имя_функции (); // вызов функции [НЕ РАБОТАЕТ] var имя_функции = функция () ;

Выражение немедленного вызова функции (IIFE)

Это функциональное выражение, код которого исполняется немедленно (только один раз при оценке). Вы можете создать один, просто добавив () (синтаксис, используемый для вызова функции) сразу после выражения функции. Они могут быть анонимными (без имени, чтобы называть это).

Ниже приведены два наиболее распространенных синтаксиса для создания IIFE:

(function option_function_name () // body ());

а также

(function option_function_name () // body) ();

Скобки вокруг объявления функции преобразуют его в выражение, а затем добавляют () после того, как он вызывает функцию. Вы можете использовать другие способы создания IIFE до тех пор, пока вы добавляете () после выражения функции (как показано ниже), но предпочтительными методами являются.

// Некоторые способы создания IIFEs! Function () / *… * / (); + function () / *… * / (); новая функция () / *… * /;

IIFE идеально подходит для написания кода, который должен выполняться только один раз, пространства имен, создания замыканий, создания частных переменных и многого другого. Ниже приведен пример использования IIFE.

var page_language = (function () var lang; // Код для получения языка страницы return lang;) ();

Код для получения языка страницы выполняется только один раз (предпочтительно после загрузки страницы). Результат сохраняется в page_language для последующего использования.

методы

Когда функция является свойством объекта, она называется методом. Поскольку функция также является объектом, функция внутри другой функции также является методом. Ниже приведен пример для метода внутри объекта.

var calc = add: function (a, b) return a + b, sub: function (a, b) return a-b console.log (calc.add (1,2)); // 3 console.log (calc.sub (80,2)); // 78

добавлять а также суб функции являются методами известково объект.

Теперь для функции в примере функции:

function add (a) return function (b) return a + b; console.log (add (1) (2)); // Вывод 3

Возвращенная анонимная функция является методом функции добавлять.

Примечание: с параметром () функции добавлять в приведенном выше примере доступна следующая функция invoke, этот тип процесса называется Выделка.

Конструкторы

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

function Fruit () имя, фамилия; // Научное имя и семейство this.getName = function () return name;; this.setName = function (value) name = value; this.getFamily = function () return family;; this.setFamily = function (value) family = value;  var apple = new Fruit (); apple.setName ("Malus domestica"); apple.setFamily ( "Rosaceae"); var orange = новый фрукт (); orange.setName ("Цитрусовый ?? ??"¢Â ?? Â ?? sinensis "); orange.setFamily (" Rutaceae "); console.log (orange.getName ()); //" Цитрусовые ?? "¢Â ?? Â ?? sinensis "console.log (apple.getName ()); //" Malus domestica "console.log (orange.getFamily ()); //" Рутовые "

Функции стрелок (стандарт ES6) [Только в Firefox]

Новое определение функции из ES6 Standard обеспечивает более короткий синтаксис для выражения функции. Синтаксис

() => / * body * /

Эта функция образца:

var sing = function () console.log ('singing…');

такой же как:

var sing = () => console.log ('singing…');

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

Они полезны, когда вы хотите этот внутри функции должен быть таким же, как снаружи, и ее более короткий синтаксис делает код для написания функции внутри функции кратким (как показано ниже)

setInterval (function () console.log ('message'), 1000);

setInterval (() => console.log ('message'), 1000);

Функции генератора (стандарт ES6) [Только в Firefox]

Еще одно новое определение функции из стандарта ES6 - это функция генератора. Функции генератора способны останавливать и продолжать его выполнение. Его синтаксис:

function * function_name ()

или же

function * function_name ()

Функции генератора создают итераторы. Итератор следующий Затем используется метод для выполнения кода внутри функции генератора, пока Уступать ключевое слово достигнуто. После этого повторное значение, идентифицированное Уступать ключевое слово возвращается функцией генератора, и выполнение останавливается.

Функция генератора снова выполняется, когда следующий метод вызывается до следующего Уступать ключевое слово достигнуто. Однажды все Уступать выражения выполняются, возвращаемое значение возвращается не определено.

Ниже приведен простой пример:

function * generator_func (count) for (var i = 0; i Вот еще один пример:
 function * randomIncrement (i) yield i + 3; выход i + 5; выход i + 10; выход i + 6;  var itr = randomIncrement (4); console.log (. itr.next () значение); // 7 console.log (itr.next (). Value); // 9 console.log (itr.next (). Value); // 14 
 Там также есть Уступать* выражение, которое передает значение в другую функцию генератора
 функция * фрукты (фрукты) урожай * овощи (фрукты); урожай "Виноград";  функция * овощи (фрукты) урожай фруктов + "и шпинат"; урожай фруктов + "и брокколи"; урожай фруктов + "и огурец";  var itr = fruits ("Apple"); console.log (. itr.next () значение); // "Яблоко и шпинат" console.log (itr.next (). Value); // "Яблоко и брокколи" console.log (itr.next (). Value); // "Яблоко и огурец" console.log (itr.next (). Value); // "Виноград" console.log (itr.next (). Value); // не определено 
 Функции генератора полезны, если вы хотите просматривать значения по одному в выбранной вами точке кода, делая паузу, а не за один раз, как при циклическом перемещении по массиву..
 Заключение
 Я включил список ссылок ниже, где вы найдете ссылки на ссылки и статьи, которые углубленно посвящены различным темам. Обе стандартные функции ES6 будут работать только в Firefox на данный момент..
 Рекомендации
 Язык ECMAScript: функции и классы
 Выражение с немедленным вызовом функции (IIFE)
 Основы генераторов ES6
 Стрелка Функции
 функция - Сеть разработчиков Mozilla