Функции ява скрипт. Объявление и вызов функции. Аргументы и параметры функций

• Перевод

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

На первых этапах изучения JavaScript новички обычно думают, что функции в нем работают примерно так же, как, скажем, в C#. Но механизмы вызова функций в JavaScript имеют ряд важных отличий, и незнание их может вылиться в ошибки, которые будет непросто найти.

Давайте напишем простую функцию, которая возвращает массив из трех элементов - текущего значения this и двух аргументов, переданных в функцию.
function makeArray(arg1, arg2){ return [ this, arg1, arg2 ]; }

Самый распространенный способ: глобальный вызов Новички часто объявляют функции так, как показано в примере выше. Вызвать эту функцию не составляет труда:
makeArray("one", "two"); // => [ window, "one", "two" ]
Погодите. Откуда взялся объект window ? Почему это у нас this равен window ?

В JavaScript, неважно, выполняется ли скрипт в браузере или в ином окружении, всегда определен глобальный объект . Любой код в нашем скрипте, не «привязанный» к чему-либо (т.е. находящийся вне объявления объекта) на самом деле находится в контексте глобального объекта. В нашем случае, makeArray - не просто функция, «гуляющая» сама по себе. На самом деле, makeArray - метод глобального объекта (в случае исполнения кода в браузере) window . Доказать это легко:
alert(typeof window.methodThatDoesntExist); // => undefined alert(typeof window.makeArray); // => function
То есть вызов makeArray("one", "two"); равносилен вызову window.makeArray("one", "two"); .

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

Правило вызова функций №1: Если функция вызывается напрямую, без указания объекта (например, myFunction()), значением this будет глобальный объект (window в случае исполнения кода в браузере).

Вызов метода Давайте создадим простой объект и сделаем makeArray его методом. Объект объявим с помощью литеральной нотации, а после вызовем наш метод:
// создаем объект var arrayMaker = { someProperty: "какое-то значение", make: makeArray }; // вызываем метод make() arrayMaker.make("one", "two"); // => [ arrayMaker, "one", "two" ] // альтернативный синтаксис, используем квадратные скобки arrayMaker["make"]("one", "two"); // => [ arrayMaker, "one", "two" ]
Видите разницу? Значение this в этом случае - сам объект. Почему не window , как в предыдущем случае, ведь объявление функции не изменилось? Весь секрет в том, как передаются функции в JavaScript. Function - это стандартный тип JavaScript, являющийся на самом деле объектом, и как и любой другой объект, функции можно передавать и копировать. В данном случае, мы как бы скопировали всю функцию, включая список аргументов и тело, и присвоили получившийся объект свойству make объекта arrayMaker . Это равносильно такому объявлению:
var arrayMaker = { someProperty: "Какое-то значение"; make: function (arg1, arg2) { return [ this, arg1, arg2]; } };
Правило вызова функций №2: В функции, вызванной с использованием синтаксиса вызова метода, например, obj.myFunction() или obj["myFunction"]() , this будет иметь значение obj .

Непонимание этого простого, в общем-то, принципа часто приводит к ошибкам при обработке событий:
function buttonClicked(){ var text = (this === window) ? "window" : this.id; alert(text); } var button1 = document.getElementById("btn1"); var button2 = document.getElementById("btn2"); button1.onclick = buttonClicked; button2.onclick = function(){ buttonClicked(); };
Щелчок по первой кнопке покажет сообщение «btn1» , потому что в данном случае мы вызываем функцию как метод, и this внутри функции получит значение объекта, которому этот метод принадлежит. Щелчок по второй кнопке выдаст «window» , потому что в этом случае мы вызываем buttonClicked напрямую (т.е. не как obj.buttonClicked()). То же самое происходит, когда мы назначаем обработчик события в тэге элемента, как в случае третьей кнопки. Щелчок по третьей кнопке покажет то же самое сообщение, что и для второй.

При использовании библиотек вроде jQuery думать об этом не надо. jQuery позаботится о том, чтобы переписать значение this в обработчике события так, чтобы значением this был элемент, вызвавший событие:
// используем jQuery $("#btn1").click(function() { alert(this.id); // jQuery позаботится о том, чтобы "this" являлась кнопкой });
Каким образом jQuery удается изменить значение this ? Читайте ниже.

Еще два способа: apply() и call() Логично, что чем чаще вы используете функции, тем чаще вам приходится передавать их и вызывать в разных контекстах. Зачастую возникает необходимость переопределить значение this . Если вы помните, функции в JavaScript являются объектами. На практике это означает, что у функций есть предопределенные методы. apply() и call() - два из них. Они позволяют переопределять значение this:
var car = { year: 2008, model: "Dodge Bailout" }; makeArray.apply(car, [ "one", "two" ]); // => [ car, "one", "two" ] makeArray.call(car, "one", "two"); // => [ car, "one", "two" ]
Эти два метода очень похожи. Первый параметр переопределяет this . Различия между ними заключаются в последющих аргументах: Function.apply() принимает массив значений, которые будут переданы функции, а Function.call() принимает аргументы раздельно. На практике, по моему мнению, удобнее применять apply() .

Правило вызова функций №3: Если требуется переопределить значение this , не копируя функцию в другой объект, можно использовать myFunction.apply(obj) или myFunction.call(obj) .

Конструкторы Я не буду подробно останавливаться на объявлении собственных типов в JavaScript, но считаю необходимым напомнить, что в JavaScript нет классов, а любой пользовательский тип нуждается в конструкторе. Кроме того, методы пользовательского типа лучше объявлять через prototype , который является свойством фукции-конструктора. Давайте создадим свой тип:
// объявляем конструктор function ArrayMaker(arg1, arg2) { this.someProperty = "неважно"; this.theArray = [ this, arg1, arg2 ]; } // объявляем методы ArrayMaker.prototype = { someMethod: function () { alert("Вызван someMethod"); }, getArray: function () { return this.theArray; } }; var am = new ArrayMaker("one", "two"); var other = new ArrayMaker("first", "second"); am.getArray(); // => [ am, "one", "two" ]
Важным в этом примере является наличие оператора new перед вызовом функции. Если бы не он, это был бы глобальный вызов, и создаваемые в конструкторе свойства относились бы к глобальному объекту. Нам такого не надо. Кроме того, в конструкторах обычно не возвращают значения явно. Без оператора new конструктор вернул бы undefined , с ним он возвращает this . Хорошим стилем считается наименование конструкторов с заглавной буквы; это позволит вспомнить о необходимости оператора new .

В остальном, код внутри конструктора, скорее всего, будет похож на код, который вы написали бы на другом языке. Значение this в данном случае - это новый объект, который вы создаете.

Правило вызова функций №4: При вызове функции с оператором new , значением this будет новый объект, созданный средой исполнения JavaScript. Если эта функция не возвращает какой-либо объект явно, будет неявно возвращен this .

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

Начнём с того что язык JavaScript поддерживает концепцию ООП (объектное ориентированное программирование). Это концепция состоит в том, что существуют такие элементы как объекты и у этих объектов есть различные свойства и методы(функции), которые позволяют управлять ими.

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

Метод - это тоже функция, но, он принадлежит уже какому-то классу или объекту.

Для того чтобы вызывать какой-то метод , необходимо сначала написать название объекта, потом через точку написать название метода. Исключением этого правила является вызов методов alert(), confirm() и prompt() объекта window. Их можно вызывать без того чтобы указать название объекта. С этими методами мы уже познакомились в этой статье .

Также, в предыдущих статьях мы познакомились с методом вывода document.write() , который принадлежит объекту document.

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

Синтаксис функции выглядит таким образом:

Для примера создадим простую функцию, которая добавит переданный текст в абзац и выведет его. И ещё сделает его жирным и курсивным.

Function writeText(text){ //Добавляем текст в абзаце и выводим его document.write("

" + text + "

"); } //Вызов созданной функции writeText("Здравствуйте!");

Сохраняем документ и открываем его в браузере.

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

Для чего нужны функции в программировании?

Основным плюсом использования функции это сокращение размера исходного кода скрипта .

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

//объявляем три массива var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; var arr2 = ; for(var i = 0; i < arr1.length; i++){ document.write("

Элемент массива arr1, с индексом " + i + " равен: "+ arr1[i] +"

"); } for(var i = 0; i < arr2.length; i++){ document.write("

Элемент массива arr2, с индексом " + i + " равен: "+ arr2[i] +"

"); } for(var i = 0; i < arr3.length; i++){ document.write("

Элемент массива arr3, с индексом " + i + " равен: "+ arr3[i] +"

"); }

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

Function printArr(arr){ for(var i = 0; i < arr.length; i++){ document.write("

Элемент массива, с индексом " + i + " равен: "+ arr[i] +"

"); } } //объявляем три массива var arr1 = ; var arr2 = ["b", 5, 9.2, "h", 8, 2]; var arr2 = ; //Вызываем созданную функцию, для перебора каждого массива printArr(arr1); printArr(arr2); printArr(arr3);

Параметры функции

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

Давайте создадим функцию без параметров , которая просто выведет на экран, классическую фразу "Hello world".

Function helloWorld(){ document.write("Hello World"); } //Вызываем функцию без параметров, helloWorld helloWorld();

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

Для примера создадим функцию, которая сложит две переданные числа. Если мы передадим только одно число, то, по умолчанию, второе число будет равна 4.

Function summa(number1, number2 = 4){ document.write("

Сумма чисел " + number1 + "(Первый параметр) и " + number2 + "(Второй параметр) равна: " + (number1 + number2) + "

"); } //Вызываем функцию, которая, по умолчанию выведет результат сложения переданного числа, с цифрой 4. summa(5); // Результат: 9 //Если предадим и второй параметр, то функция выведет результат сложения чисел из обоих параметров. summa(5, 20); // Результат: 25

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

Для примера, вызовем первую созданную нами функцию writeText() внутри предыдущей функции summa(). Функции writeText() передадим результат сложения чисел. В таком случае код функции summa() будет выглядеть уже так:

Function summa(number1, number2 = 4){ writeText(number1 + number2); } //Вызываем функцию summa summa(5); // Результат: 9 summa(5, 20); // Результат: 25

Функции которые возвращают какое-то значение

До сих пор мы писали функции, которые выводят результат на экран сразу.

Теперь же научимся как написать функцию, которая возвращает какой-то результат . Этот результат мы можем добавить в какую-то переменную и работать с ним дальше.

Для того чтобы лучше понять о чем идёт речь, вспомним такие методы как prompt() и confirm(). Эти методы именно возвращают значение, полученное от пользователя, а не выводят его.

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

Function lastElement(arr){ //Возвращаем последний элемент переданного массива return arr; } //Объявляем массив var otherArr = ["iphone", "asus", 2000, 9.8, "twix"]; //Вызываем созданную функцию lastElement и в качестве параметра передаем ей созданный массив otherArr var lastEl = lastElement(otherArr); //Выводим полученный последний элемент массива alert(lastEl);

В результате мы получим слово ‘twix’, так как именно это слово и есть последний элемент массива otherArr.

Метод alert() ничего не возвращает . То есть если мы попытаемся выводить переменную которая типа содержит результат вызова метода alert(), то увидим значение undefined . Это тоже самое как попытаться выводить значение пустой переменной.

Для примера возьмём результат последнего вызова alert() из предыдущего примера, помещаем его в переменную resAlert и используя созданную нами функцию writeText, попытаемся вывести полученный результат.

//Выводим полученный последний элемент массива var resAlert = alert(lastEl); var test; writeText(resAlert); //undefined writeText(test); //undefined

Как видим в обоих случаях получили значение undefined.

Глобальные и локальные переменные

Глобальные переменные - это те переменные, которые объявлены за пределами функции. То есть все те переменные, которые не объявлены внутри самой функции, являются глобальными . Они видны (действительны) во всем документе.

Локальные переменные - это те переменные, которые объявлены внутри самой функции . И они действительны только внутри данной функции. За её пределами, локальные переменные уже не будут работать.

Локальные и глобальные переменные никак не связаны между собой.

В примере из изображения, если бы мы попытались выводить содержимое переменной x, то получили бы сообщение undefined , потому что мы забыли вызвать функцию other().

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

Вызываем функцию other(), и если теперь попробуем вывести значение переменной x, то в результате увидим цифру 4.

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

Var x = 8; function increment(){ x++; } //Вызываем функцию increment() increment(); alert(x); //Результат: 9

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

Var g = 100; function func(){ var g = 14; g *= 2; // Это тоже самое что g = g * 2 alert(g);//Результат: 28 } //Вызываем функцию. func(); alert(g);//Результат: 100

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

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

Задачи

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

Выведите полученный результат.

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

Объявление и вызов функции JavaScript

Синтаксис функции JavaScript выглядит следующим образом:

function ""имя"" (""аргумент1"", ""аргумент2"", ""аргумент3"" ...) { ""операторы"" return ""значение"" }

Имя определяет, как мы будем называть функцию при ее вызове. Аргументы задают значения, которые передаются функции для обработки. Раздел операторы представляет собой тело функции, которая выполняет обработку. Необязательный оператор return позволяет вернуть значение.

В следующем примере показана функция, определяемая в разделе HTML-страницы и вызываемая в разделе :

function sayHello() { alert("Привет!"); } sayHello();

Передача аргументов в функцию

В приведенном выше примере (script type text JavaScript function ) функции не передается никакие аргументы. Обычно функция предназначена для выполнения каких-либо действий с несколькими аргументами:

Простой пример функции JavaScript function sayHello(day, month) { alert("Привет! Сегодня " + day + " " + month); } sayHello("24", "Июля"); sayHello ("1", "Августа"); sayHello ("24", "Мая");

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

Возврат значения из функции

Оператор return применяется для возврата значения из функции и его использования в месте, где вызывается функция. В качестве примера мы объявим функцию, которая складывает два аргумента и возвращает результат:

Простой пример функции JavaScript var result = addValues(10, 20) document.write ("Результат = " + result);

В приведенном выше примере мы передаем в функцию addValues значения 10 и 20 . Функция addValues складывает эти два значения и возвращает результат. Оператор return присваивает результат переменной result, которая затем используется для создания строки, выводимой на HTML-странице .

Вызов JavaScript function может быть выполнен в разных местах. Например, не обязательно присваивать результат в качестве значения переменной. Можно использовать его непосредственно в качестве аргумента при вызове document.write .

Важно отметить, что функция может возвращать только одно значение:

Простой пример функции JavaScript function addValues(value1, value2) { return value1 + value2; } document.write ("Результат = " + addValues(10, 20)); JavaScript onclick function также могут использоваться в условных выражениях. Например: Простой пример функции JavaScript function addValues(value1, value2) { return value1 + value2; } if (addValues(10, 20) > 20) { document.write ("Результат > 20"); } else { document.write ("Результат < 20"); }

Где размещать объявления функций

Есть два места, в которых рекомендуется размещать объявления JavaScript function return: внутри раздела HTML-документа или во внешнем файле .js . Наиболее предпочтительным местом считается второй вариант, так как он обеспечивает наибольшую гибкость.

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

Перевод статьи «Understanding JavaScript Functions » был подготовлен дружной командой проекта .

Хорошо Плохо

Встроенная функция описывает какие-либо действия, которые она может совершить при её вызове. Описание действий встроенных функций скрыто от программиста. Примером таких действий может служить вычисление математического выражения и возвращение результата или манипуляция с содержимым html-документа. Функция может принимать параметры или аргументы, с которыми она производит какие-то действия. Аргументами могут служить как , так и .

Вызов функции производится следующим образом:

var a = functionName(par1, par2, …, parN);

В js существует множество встроенных функций для подсчёта математических выражений. Например, функция Math.sin, возвращает синус угла (угол задаётся в радианах), функция Math.sqrt вычисляет корень квадратный из числа, переданного ей в качестве параметра и т.д.

Например, вычислим корень квадратный из 256.

var b = Math.sqrt(256);

После выполнения кода одного из двух вышепредставленных примеров в переменной b будет содержаться значение 16.

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

Функция alert

Эта функция принимает в качестве параметра текстовое представление значение, которое она выведет на экран в унылом сером окошке с кнопкой «Ок». Пока пользователь не нажмёт эту кнопку, выполнения скрипта не продолжится.

Функция document.write

Эта функция пишет в html-документ текстовое представление значения переданного ей в качестве параметра. Никогда не используйте этот метод при написании скриптов, для реальных проектов, если, конечно, точно не знаете, что делаете. Если вызывать эту функцию после загрузки страницы, то, скорее всего, вы увидите пустую страницу с текстом, который вывел последний вызов этой функции.

Объект Math

В этом объекте содержатся функции для вычисления математических выражений и некоторые константы. Об объектах мы поговорим попозже. Для того, чтобы использовать объект Math вам надо лишь запомнить, что обращение к его свойствам (функциям и константам) необходимо написать Math.имяФункцииИлиКонстанты.

Свойства, которые содержит объект Math (слово «Math» опущено):

1. Константы

E 2.718281828459045
LN10 2.302585092994046 (логарифм натуральный 10)
LN2 0.6931471805599453 (логарифм натуральный 2)
LOG10E 0.4342944819032518 (логарифм десятичный e)
LOG2E 1.4426950408889634 (логарифм по основанию 2 числа e)
PI 3.141592653589793
SQRT1_2 0.7071067811865476 (корень квадратный из 0.5)
SQRT2 1.4142135623730951 (корень квадратный из двух)

2. Тригонометрические функции

sin – синус
cos – косинус
tan – тангенс

Угол, который в качестве аргумента принимают эти функции задаётся в радианах, а не в градусах. Для того, чтобы перевести значение угла из градусов в радианы необходимо умножить его на Math.PI и разделить на 180. И наоборот для того, чтобы перевести значение угла из радианов в градусы необходимо умножить его на 180 и разделить на Math.PI.

Таким образом, 60 градусов это π / 3 радиан, 30 градусов это π / 6 радиан и 45 градусов π / 4 радиан.

3. Обратные тригонометрические функции

acos – арккосинус от числа т.е. такой угол (в радианах), косинус которого равен аргументу
asin – арксинус от числа т.е. такой угол (в радианах), синус которого равен аргументу
atan – арктангенс от числа т.е. такой угол (в радианах), тангенс которого равен аргументу
atan2 – арктангенс от частного двух аргументов

3. Другие функции

abs – модуль числа
floor – целая часть числа, “пол“ или округление в меньшую сторону. Обратите внимание, что, например Math.floor(-0.9) и Math.floor(-0.1) это -1, а не ноль.
ceil – округление в большую сторону или «потолок»
exp – возвращает значение выражения e x , где x – это аргумент функции
log – возвращает натуральный логарифм числа
pow – принимает два аргумента и возвращает степень основание которой это первый аргумент, а показатель – второй.
max – принимает произвольное количество параметров и возвращает максимальный из них
min – принимает произвольное количество параметров и возвращает минимальный из них
random – возвращает случайное значение от 0 до 1
round – округляет число до единиц
sqrt – вычисляет корень квадратный из числа

Многие другие встроенные функции мы рассмотрим по ходу следующих уроков, а на сегодня всё.

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

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

Объявление и вызов функции

Существует три способа объявления функции: Function Declaration, Function Expression и Named Function Expression.

Function Declaration (сокращённо FD) – это "классическое" объявление функции. В JavaScript функции объявляются с помощью литерала функции. Синтаксис объявления FD:

Литерал функции состоит из следующих четырёх частей:

Ключевое слово function .

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

Пара круглых скобок вокруг списка из нуля или более идентификаторов, разделяемых запятыми. Данные идентификаторы называются параметрами функции.

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

Простой пример:

Function sayHi() { alert("Hello"); }

Встречая ключевое слово function интерпретатор создаёт функцию и затем присваивает ссылку на неё переменной с именем sayHi (переменная с данным именем создаётся интерпретатором автоматически).

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

Alert(sayHi); // function sayHi() { alert("Hello"); }

Function Expression (сокращённо FE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления FE:

Function (параметры) { инструкции }

Простой пример:

Var sayHi = function () { alert("Hello"); };

Функцию FE иначе ещё называют "анонимной функцией ".

Named Function Expression (сокращённо NFE) – это объявление функции, которое является частью какого-либо выражения (например присваивания). Синтаксис объявления NFE:

Function идентификатор (параметры) { инструкции }

Простой пример:

Var sayHi = function foo() { alert("Hello"); };

Объявления FE и NFE обрабатываются интерпретатором точно так же, как и объявление FD: интерпретатор создаёт функцию и сохраняет ссылку на неё в переменной sayHi.

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

Function sayHi() { alert("Hello"); } var sayHi2 = function () { alert("Hello2"); }; var sayHi3 = function foo() { alert("Hello3"); }; sayHi(); // "Hello" sayHi2(); // "Hello2" sayHi3(); // "Hello3"

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

// Вызов функции до её объявления в коде верхнего уровня foo(); function foo() { alert("Вызов функции foo() в глобальной области видимости."); // Вызов функции до её объявления в области видимости функции bar(); function bar() { alert("Вызов функции bar() в области видимости функции."); } }

Функции, объявленные как FE или NFE, создаются в процессе выполнения кода, поэтому их можно вызывать только после того как они объявлены:

// sayHi(); // Ошибка. Функция sayHi ещё не существует var sayHi = function () { alert("Hello!"); }; sayHi();

Функции, объявленные внутри блока, находятся в блочной области видимости:

// foo(); // Ошибка. Функция не объявлена. { foo(); // 1 function foo() { console.log(1); } } foo(); // Ошибка. Функция не объявлена.

В отличие от FE, функция, объявленная как NFE, имеет возможность обращаться к себе по имени при рекурсивном вызове. Имя функции доступно только внутри самой функции:

(function sayHi(str) { if (str) { return; } sayHi("hi"); // Имя доступно внутри функции })(); sayHi(); // Ошибка. Функция не объявлена

Функция обратного вызова

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

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

Ниже приведён пример функции, принимающей в качестве своего аргумента ссылку на другую функцию для её последующего вызова:

Function foo(callback) { return callback(); } foo (function() { alert("Hello!"); });

Этот пример наглядно демонстрирует принцип действия обратного вызова.