Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Определения функций JavaScript


Функции JavaScript определяются с помощью functionключевого слова.

Вы можете использовать объявление функции или функциональное выражение .


Объявления функций

Ранее в этом руководстве вы узнали, что функции объявляются со следующим синтаксисом:

function functionName(parameters) {
  // code to be executed
}

Заявленные функции выполняются не сразу. Они «сохраняются для последующего использования» и будут выполняться позже, когда они вызываются (вызываются).

Пример

function myFunction(a, b) {
  return a * b;
}

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


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

Функцию JavaScript также можно определить с помощью выражения .

Выражение функции может быть сохранено в переменной:

Пример

const x = function (a, b) {return a * b};

После того, как функциональное выражение было сохранено в переменной, эту переменную можно использовать как функцию:

Пример

const x = function (a, b) {return a * b};
let z = x(4, 3);

Приведенная выше функция на самом деле является анонимной функцией (функция без имени).

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

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



Конструктор Function()

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

Функции также могут быть определены с помощью встроенного конструктора функций JavaScript с именем Function().

Пример

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

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

Пример

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

В большинстве случаев вы можете избежать использования newключевого слова в JavaScript.


Функция подъема

Ранее в этом руководстве вы узнали о «подъеме» ( JavaScript Hoisting ).

Подъем — это стандартное поведение JavaScript для перемещения объявлений в верхнюю часть текущей области.

Подъем применяется к объявлениям переменных и к объявлениям функций.

Из-за этого функции JavaScript можно вызывать до того, как они будут объявлены:

myFunction(5);

function myFunction(y) {
  return y * y;
}

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


Самовызов функций

Функциональные выражения можно сделать «самовызывающимися».

Самовызывающееся выражение вызывается (запускается) автоматически, без вызова.

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

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

Вы должны добавить круглые скобки вокруг функции, чтобы указать, что это функциональное выражение:

Пример

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

Приведенная выше функция на самом деле является анонимной функцией с самовызовом (функция без имени).


Функции могут использоваться как значения

В качестве значений можно использовать функции JavaScript:

Пример

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

Функции JavaScript можно использовать в выражениях:

Пример

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

Функции — это объекты

Оператор typeofв JavaScript возвращает «функцию» для функций.

Но лучше всего функции JavaScript можно описать как объекты.

Функции JavaScript имеют как свойства , так и методы .

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

Пример

function myFunction(a, b) {
  return arguments.length;
}

Метод toString()возвращает функцию в виде строки:

Пример

function myFunction(a, b) {
  return a * b;
}

let text = myFunction.toString();

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


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

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

Вам не нужны functionключевое слово, returnключевое слово и фигурные скобки .

Пример

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;

Стрелочные функции не имеют собственных this. Они плохо подходят для определения методов объекта .

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

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

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

Пример

const x = (x, y) => { return x * y };

Стрелочные функции не поддерживаются в IE11 и более ранних версиях.