Различные способы написания функции в JavaScript

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

Краткий обзор:

Мы видели анатомию функции в JavaScript, и оператор typeof в функции возвращает строку «функция».
Мы видели, что существует 6 различных способов написания функции.
Мы узнали о трех способах написания функции, а именно о объявлении функции, выражении функции и выражении именованной функции.

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

4. Немедленно вызываемая функция:

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

(function() {
  console.log(‘hello world’);
})();

Обратите внимание, что приведенный выше код начинается с '(', и мы начинаем писать функцию внутри него. И мы закрываем скобки, используя ')', и сразу же вызываем функцию, используя (). Если вы удалите открывающую '(' и закрывающую ')', а также '()', вы увидите, что это очень похоже в функциональное выражение, которое может быть присвоено переменной, которую мы видели в части 1. Если вы выполните приведенный выше код, вы увидите, что «hello world» будет напечатано в консоли, потому что мы вызвали функцию сразу после объявления с помощью '( )'.

Примечания:

Итак, почему используется IIFE? Основная цель IIFE — выполнить несколько строк кода, не загрязняя окружающую область. (Если вы не знаете, что такое область видимости, прочтите ее здесь). Как вы знаете, область видимости создается, когда функция объявляется в JavaScript, а переменные и аргументы этой функции видны ее дочерним элементам. Если вы хотите выполнить какой-то код в изолированной области, когда код инициализируется, вы можете использовать IIFE
Было время, когда люди писали интерфейсный код на чистом JavaScript без каких-либо фреймворков, таких как Angular, React и т. д. Да! такой период существовал в истории человечества. В течение этого времени люди обычно создают область действия для всего своего приложения, используя описанный выше IIFE. Таким образом, весь их код заключен в IIFE, чтобы создать область для их приложения. Это можно проиллюстрировать ниже:

(function(global, applicationScope) {
  applicationScope.hello = function hello() {
    console.log(‘world’);
  }
  applicationScope.hello(); // Prints world
}(window, applicationScope || {});

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

Подробнее о IIFE можно прочитать в этом блоге.

5. Конструктор функций

Это больше похоже на спрятанное сокровище в мире JavaScript. В JavaScript есть встроенная функция с названием Function. Вы можете использовать эту функцию, чтобы создать свою собственную функцию.

Позвольте мне открыть вам секрет сейчас. Несмотря на то, что мы видели, что тип функции (используя оператор typeof) является функцией, все функции в JavaScript на самом деле являются объектами! Эти объекты относятся к типу Function, встроенной функции.

Без путаницы, давайте посмотрим на это в действии

// Creating a function using Function constructor
var myFunction = new Function(‘someString’, ’console.log(someString);’);
// calling the function
myFunction(‘hello’);

Вы можете запустить приведенный выше код в JSFiddle по этой ссылке: https://jsfiddle.net/subramaniashiva/xcnb2ssg/

Как видно из приведенного выше кода, мы создаем функцию, используя ключевые слова 'new' и 'Function'. Подробнее о новом ключевом слове мы поговорим позже. Но пока предположим, что вам нужно использовать ключевое слово «новое» и встроенную функцию с именем «Функция» (обратите внимание на заглавную букву F, которая отличается от обычной функции). Первый аргумент — это параметр функции, а последний аргумент — тело функции. Обратите внимание, что мы обозначаем все аргументы и тело как строку, а не фактический код.

Приведенный выше код эквивалентен:

function myFunction(someString) {
  console.log(someString);
}

Примечания:

Функции, объявленные с помощью конструктора функций, оцениваются во время выполнения с помощью функции eval. Функция eval принимает строку в качестве аргумента и выполняет этот код как настоящий код JavaScript. Например, eval('console.log("hello")'); напечатает привет. Обратите внимание, как мы передаем код JavaScript console.log("hello") в виде строки, заключая ее в ‘ и ‘, а не как фактический код JavaScript.
Поскольку функция, созданная в приведенном выше стиле, оценивается во время выполнения, а не во время компиляции, на самом деле она требует большой производительности. Движки JavaScript не будут выполнять никаких оптимизаций этого кода во время компиляции, потому что никогда не узнают, что такое реальная функция. Определяется только во время выполнения.
Всегда помните об этом. Никогда не объявляйте свою функцию в стиле, указанном выше :) Это очень требовательно к производительности, подвержено ошибкам и трудно читается, трудно отлаживается.

6. Стрелочные функции:

Это дополнение к последней версии ES6. Они аналогичны анонимной функции. Давайте сначала посмотрим на пример, чтобы лучше понять его.

((someString) => {
 console.log(someString)
})(‘hello’);

JSfiddle для приведенного выше кода можно найти здесь: https://jsfiddle.net/subramaniashiva/9Lcg09dh/

Из приведенного выше кода видно, что он похож на IIFE, но функция не имеет имени и сразу же выполняется. Функция стрелки также может быть выполнена в более поздний момент времени. Приведенный выше код эквивалентен:

(function(someString) {
  console.log(someString);
})(‘hello’);

Примечания:

Если стрелочная функция содержит только одну строку, то мы можем использовать '('и ')'вместо '{'и '}'. Следовательно, приведенный выше код может быть записан в

((someString) => (
 console.log(someString)
))(‘hello’);

В этом случае возвращаемое значение функции log консоли возвращается после выполнения функции. Дайте мне знать в комментарии, каково возвращаемое значение приведенного выше кода.

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

Поясню приведенное выше утверждение. Функция массива в JavaScript имеет вспомогательную функцию под названием 'filter', которая помогает нам фильтровать некоторые элементы из массива. Функция фильтра ожидает, что в качестве аргумента будет передан массив. Функция, которую мы передаем с нашей пользовательской логикой, должна возвращать истину или ложь для данного элемента в массиве. Функция фильтра вызывает эту функцию, передавая элементы массива один за другим. Таким образом, если массив содержит 6 элементов, функция фильтра вызывает переданную ей функцию 6 раз и каждый раз передает элемент массива.

Допустим, у нас есть массив целых чисел, и мы хотим отфильтровать четные числа из массива. В этом случае мы пишем функцию, которая возвращает истину или ложь для заданного числа, т.е.

function isEven(number) {
  return number % 2 === 0;
}

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

myArray.filter(isEven); // Этот код создает дополнительную переменную «isEven» во внешней области видимости. Мы можем избежать этого, передав анонимную функцию

myArray.filter(function(number) {
  return number%2 === 0;
}

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

myArray.filter((number) => (number%2 === 0));

Обратите внимание, насколько аккуратен и точен код, а также меньше нажатий клавиш. В основном инженеры лентяи, я прав? :D

Поскольку функция имеет только один оператор, мы можем использовать (и )вместо {и }

Пример скрипта можно найти здесь: https://jsfiddle.net/subramaniashiva/7gy3sht1/

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

Как вы печатаете содержимое пользовательской функции в JavaScript?

Как я уже рассказал вам секрет, все функции в JavaScript являются объектами. Таким образом, каждый объект по умолчанию имеет метод toString. Таким образом, вы просто вызываете метод toString для этого имени функции. Это все :)

Поиграйте со следующей скрипкой, чтобы понять это:

https://jsfiddle.net/subramaniashiva/us2w86Lk/

Надеюсь, вы поняли о различных способах объявления функции. Я что-то пропустил? Полезен ли вам блог? Дайте мне знать ваши мысли ниже.

Удачного кодирования!

Различные способы написания функции в JavaScript — Часть 2

Вопросы по теме