JavaScript - необычный язык с множеством сложностей. Естественно, он предоставляет вам более одного способа создания функций. Функция - это повторно используемый фрагмент кода, который выполняется при вызове. Функции позволяют вам повторно использовать код, делая его более модульным и легким в обслуживании.
В JavaScript существует несколько способов создания функций. Здесь вы узнаете различные способы создания функций и как ими пользоваться.
Объявление Функций: Прямолинейный Путь Один из способов создания функций в JavaScript - через объявление функции. Объявление функции - это функция в JavaScript, которая следует синтаксису ниже.
function имяФункции(параметры) {
// код здесь...
return "Это объявление функции";
}
Компоненты блока кода выше включают:
Например, объявление функции ниже принимает три числа в качестве параметров и возвращает их сумму.
function сложитьТриЧисла(a, b, c) {
return a + b + c;
}
Для вызова функции в JavaScript напишите имя функции, за которым следует набор круглых скобок (). Если функция принимает какие-либо параметры, передайте их в качестве аргументов внутри скобок.
Например:
сложитьТриЧисла(1, 2, 3); // 6
Блок кода выше вызывает функцию сложитьТриЧисла и передает 1, 2 и 3 в качестве аргументов. Если вы выполните этот код, он вернет значение 6.
JavaScript поднимает объявления функций, что означает, что вы можете вызывать их до их определения.
Например:
isHoisted(); // Функция поднята
function isHoisted() {
console.log("Функция поднята");
return true;
}
Как показано в блоке кода выше, вызов isHoisted перед его определением не вызовет ошибку.
Функциональные выражения: Функции как Значения В JavaScript вы можете определить функцию как выражение. Затем вы можете присвоить значение функции переменной или использовать его в качестве аргумента для другой функции.
Их также называют анонимными функциями, поскольку они не имеют имен и их можно вызывать только из переменной, к которой вы их присвоили.
Вот синтаксис для функционального выражения:
const имяФункции = function () {
return "Функциональное выражение";
};
Для вызова функционального выражения в JavaScript напишите имя переменной, которой вы присвоили функцию, за которым следует набор круглых скобок (). Если функция принимает какие-либо параметры, передайте их в качестве аргументов внутри скобок.
Например:
имяФункции(); // Функциональное выражение
Функциональные выражения удобны при создании функций, которые выполняются внутри других функций. Типичные примеры включают обработчики событий и их обратные вызовы.
Например:
кнопка.addEventListener("click", function (событие) {
console.log("Вы нажали кнопку!");
});
Приведенный выше пример использовал функциональное выражение, которое принимает аргумент события в качестве обратного вызова для функции addEventListener. Вы не обязаны явно вызывать функцию, когда вы используете функциональное выражение в качестве обратного вызова. Он автоматически вызывается его родительской функцией.
В указанном выше случае, когда прослушиватель событий получает событие щелчка, он вызывает функцию обратного вызова и передает объект события в качестве аргумента.
В отличие от объявлений функций, функциональные выражения не поднимаются, поэтому их нельзя вызывать до их определения. Попытка доступа к функциональному выражению до его определения приведет к ошибке ReferenceError.
Например:
isHoisted(); // ReferenceError: Cannot access 'isHoisted' before initialization
const isHoisted = function () {
console.log("Функция поднята");
};
Стрелочные функции: Компактные и Ограниченные ES6 представил сокращенный способ написания анонимных функций в JavaScript, называемых стрелочными функциями. У них есть лаконичный синтаксис, который может сделать ваш код более читаемым, особенно при работе с короткими, однострочными функциями.
В отличие от других методов создания функций, стрелочные функции не требуют ключевого слова function. Выражение стрелочной функции состоит из трех частей:
Например:
// Один параметр, неявный возврат
const имяФункции = параметр => console.log("Стрелочная функция с одним параметром");Если вы опускаете фигурные скобки, стрелочная функция неявно возвращает единственное выражение, поэтому нет необходимости в ключевом слове return. С другой стороны, если вы не опускаете фигурные скобки, вы должны явно вернуть значение с использованием ключевого слова return.
Стрелочные функции также имеют другое привязывание this по сравнению с обычными функциями. В обычных функциях значение this зависит от того, как вызывается функция. В стрелочной функции this всегда привязано к значению this окружающей области видимости.
Например:
const foo = {
имя: "Дейв",
привет: function () {
setTimeout(() => {
console.log(`Привет, меня зовут ${this.name}`);
}, 1000);
},
};В приведенном выше примере стрелочная функция внутри метода greet имеет доступ к this.name, даже если ее вызывает функция setTimeout. Обычная функция имела бы this, привязанное к глобальному объекту.
Немедленно вызываемые функциональные выражения (IIFE) Как следует из названия, немедленно вызываемая функция (IIFE) - это функция, которая выполняется сразу после своего определения.
Вот структура IIFE:
(function () {
// код здесь
})();IIFE состоит из функционального выражения, обернутого в пару круглых скобок. За ним следует пара круглых скобок за пределами оболочки для вызова функции.
Вы можете использовать IIFE для создания областей видимости, скрытия деталей реализации и обмена данными между несколькими скриптами. Они когда-то использовались как система модулей в JavaScript.
Создание функции различными способами Понимание того, как создавать функции в JavaScript, крайне важно. Это верно как для базовой функции, выполняющей простые вычисления, так и для сложной функции, взаимодействующей с другими частями вашего кода.
Вы можете использовать рассмотренные выше техники для создания функций в JavaScript и структурирования и организации своего кода. Выберите подход, который лучше всего соответствует вашим требованиям, поскольку у каждого из них есть различные преимущества и применения.
Добавить комментарий