Страница из моих заметок по JavaScript в качестве краткого справочника по функциям.
Из многочисленных статей, которые я читал, и видео, которые я смотрел, я узнал, что современные вычисления — это абстракция от двоичного кода до сложных программ (и от микросхем до сложных роботов). И когда я учусь программировать на JavaScript, первым таким примером абстракции являются функции. Как удобно хранить кусок кода в функции и вызывать его все время, нам нужно его использовать повторно. По мере того, как мой путь изучения продвигается в сторону React, я снова вижу похожие функциональные компоненты в виде повторно используемых модулей, выполняющих определенные задачи или отображающих определенные элементы, когда мы их вызываем, без постоянного вникания в их тело — все сложные детали скрыты внутри.
Первым шагом к использованию полного потенциала функций является овладение синтаксисом или структурой функции. Поэтому я позаботился о том, чтобы в моих личных заметках о JavaScript я выделил страницу для краткого изложения некоторых ключевых деталей синтаксиса функций. Позвольте мне поделиться тем же со всеми вами, чтобы вы могли рассматривать это как быстрое освежение:
Существует три распространенных способа написания функций — «объявление функции», «выражение функции» и «функция-стрелка». Все они делают одно и то же, но немного по-разному, и у них есть свои достоинства и недостатки. Давайте подробно обсудим синтаксис и нюансы каждого из них.
Объявление функции
Объявление впервые вводит объект (например, переменную) в ваш компилятор. Когда дело доходит до объявления переменных (и даже объектов или массивов), мы используем let, var или const, а затем имя сущности, а затем присваиваем ей значение (хотя для let и var вы можете просто сначала объявить и присвоить значение позже). Объявление функции уникально в этом смысле, базовая форма объявления функции не использует ler, var или const; вместо этого используется ключевое слово «функция», затем имя функции, за которым следуют параметр(ы) в круглых скобках и, наконец, тело функции, заключенное в пару фигурных скобок. Обратите внимание, что вам не нужна точка с запятой в конце функции, то есть после закрывающей фигурной скобки тела функции. Вместо этого любой оператор (включая оператор return), который вы пишете внутри тела, заканчивается точкой с запятой. Кроме того, когда мы вызываем функцию, мы заканчиваем ее точкой с запятой.
// Function Declaration
function sum(a, b) {
return a + b;
}
// Calling the function
const result = sum(3, 7);
Объявления функций не являются частью обычного потока управления сверху вниз; они концептуально перемещаются в верхнюю часть своей области и могут использоваться всем кодом в этой области (во многом подобно любой привязке, объявленной с помощью var, которая поднимается, т. е. объявление такой переменной в любом месте кода эквивалентно объявлению ее в вершина). В результате функция, объявленная как объявление функции, может быть вызвана раньше, чем она определена. Таким образом, это позволяет нам свободно упорядочивать код, не беспокоясь об определении всех функций до их использования.
Выражение функции
В этой форме мы рассматриваем функции как значения. Хотя привязка функции обычно действует как имя, которое «вызывается» для функции (т. е. объявление функции и вызывающий процесс), она также может быть создана внутри другого выражения или оператора, такого как объявление переменной — и, следовательно, выражение имени функции. Функция, которая обрабатывается как значение, присваивается переменной — тогда эту переменную можно назвать функцией. Но в отличие от объявления функции, с выражением функции функция создается только тогда, когда выполнение достигает этой строки, и с этого момента ее можно использовать. Поэтому вам необходимо определить переменную, которая содержит функцию, до использования переменной/функции. Даже сохранение его в переменной, объявленной с ключевым словом var, не помогает (т. е. не поднимает его).
Как и в других привязках, в этом случае мы объявляем переменную с помощью var, let или const, а затем присваиваем ей функцию (ключевое слово «функция», за которой следуют круглые скобки, а затем — тело функции) в качестве значения. И в целом строка кода действует как оператор, т. е. левая часть присваивания — это объявление переменной, а правая часть — значение функционального выражения. Будучи оператором, строка заканчивается точкой с запятой.
// Function Expression
let sum = function(a, b) {
return a + b;
};
// Calling the function
const result = sum(1, 3);
Обратите внимание, что привязка, содержащая функцию, по-прежнему является обычной привязкой, и ей может быть присвоено новое значение, если она не является константой, например:
let weterPlants = function() {
sprinklerSystem.run("15", "minutes");
};
if (rainForecast == true) {
waterPlants = function() { /* do nothing */ };
}
По этой причине многие программисты следуют соглашению о написании выражений функций с привязкой const, чтобы избежать случайного переназначения позже в коде.
Стрелочные функции
Они были представлены в ES6, что позволило нам писать более короткий код. По своей природе они больше похожи на выражения и, следовательно, начинаются с объявления переменной (с помощью var, let или const), а затем переменной присваивается значение выражения стрелочной функции. Только выражение становится короче, опуская ключевое слово «функция» и вводя «=›» после параметров и перед телом.
let sum = (a, b) => {
let result = a + b;
return result;
};
Приведенный выше пример можно преобразовать в формат выражения стрелочной функции. Поскольку стрелочная функция предназначена для написания более короткого кода, она позволяет сделать еще несколько настроек, чтобы сократить код. Если нам не нужен многострочный код в теле функции, т. е. если оно содержит один оператор, а не блок кода, пару фигурных скобок можно убрать. Кроме того, ключевое слово «возврат» не является обязательным; мы можем избавиться от этого, если оно может быть неявным. Таким образом, приведенный выше пример может быть таким коротким, как:
let sum = (a, b) => a + b;
Кроме того, если у нас есть только один параметр, круглые скобки вокруг него можно опустить, что сделает его еще короче:
let displayA = a => alert("this is ", a);
Обратите внимание, однако, что если в функции нет параметров, пара скобок может быть пустой, но они должны присутствовать, например:
let sayHi = () => alert("Hello!");
Хотя более короткий код стрелочной функции помогает и поэтому чаще всего используется опытными программистами, у него есть некоторые ограничения:
- Стрелочные функции не имеют собственных привязок к this, arguments или super; и не должны использоваться в качестве методов.
- Стрелочные функции нельзя использовать в качестве конструкторов. Вызов их с помощью «нового» вызывает ошибку TypeError. У них также нет доступа к ключевому слову «new.target».
- Стрелочные функции не могут использовать «выход» внутри своего тела и не могут быть созданы как функции-генераторы.
Конечная нота
Выше я указал несколько пунктов об ограничениях стрелочной функции. Но когда я прочитал о них в первый раз, у меня возникло столько вопросов, например: что «это»? Что такое «конструктор»? Что такое «генерирующая функция»? И так далее. Итак, вот что я нашел в качестве ответов на свои собственные вопросы:
this: обработка this отличается в стрелочных функциях по сравнению с обычными функциями. Короче говоря, в стрелочных функциях нет привязки это. В обычных функциях ключевое слово это представляет объект, вызывающий функцию, который может быть окном, документом, кнопкой или чем-то еще. В стрелочных функциях ключевое слово this всегда представляет объект, определяющий стрелочную функцию. Чтобы понять разницу, посмотрите на эти замечательные примеры для самостоятельного опробования от w3schools внизу этой страницы.
'конструктор': это метод особого типа в классе, т. е. функция, которая вызывается для создания новых объектов того же класса. Отсюда и название конструктор. Метод конструктора используется не только для создания нового объекта, но и для присвоения некоторых свойств вновь созданному объекту. И при этом метод конструктора содержит ключевое слово this в своем теле, относящееся к объекту, который он создает.
class Automobile {
constructor(numWheels) {
this.numWheels = numWheels;
}
}
const car = new Automobile(4);
console.log(car.numWheels);
// -> 4
"функция-генератор": объявление "функция*" (ключевое слово function, за которым следует звездочка) определяет функцию-генератор, которая возвращает объект-генератор. Из функции генератора можно выйти, а затем снова войти, при этом ее контекст (привязки переменных) сохраняется при повторных входах. Оператор yield используется для приостановки и возобновления функции генератора.
function* generator(index) {
while (index < 2) {
yield index;
index++;
}
}
const iterator = generator(0);
console.log(iterator.next().value); // -> 0
console.log(iterator.next().value); // -> 1
