Функции II
Колбэк-функция (callback)
- Это передача функции (часто анонимной) в качестве аргумента, она будет выполнена после выполнения функции, в которую она передаётся
- Колбеки отрабатываться после выполнения каких-либо операций.
- Часто применяются для действий над какими-нибудь полученными данными (которые посчитались в самой функции)
Пример с function
function doHomework(subject, callback) {
alert(`Starting my ${subject} homework.`);
callback();
}
doHomework('math', function () {
alert('Finished my homework');
});
Пример с alert
В данном примере alert будет являться колбеком.
const someFunc = function (value, cb) {
console.log(value);
if (value > 0) {
cb();
}
};
someFunc(5, () => alert('value > 0'));
someFunc(-5, () => alert('value < 0'));
Колбек с параметром
const someFunc = function (value, cb) {
if (value > 0) {
cb(value);
}
};
someFunc(5, function (value) {
alert('value > 0');
console.log(value);
});
Анонимные самовызывающиеся функции
Паттерн IIFE — анонимные изолированные самовызывающиеся функции.
- Не нужно именовать
- Будет выполняться при загрузке.
- Чаще всего встречаются в замыканиях или в качестве аргумента другой функции (колбэк).
- Изолированы от области видимости. Любые переменные внутри IIFE невидимы для внешнего мира.
- Результат таких функций можно сохранять в переменные
- Функция сразу вызовится, как до нее дойдет интерпритатор.
- Также такие функции можно использовать как модульные, сохраняя в объект window.utils
// Этот код сразу выполнится
(function () {
console.log('Hello');
})();
// Можно передавать параметры
(function (value) {
console.log(value);
})('Hello');
// Сохраняем результат в переменную
const greeting = (function (name) {
return `Hello, ${name}`;
})('Sorax');
console.log(greeting); // Hello, Sorax
// Так тоже будет работать (без скобок) - но обычно АСФ указывают в скобках
const greeting = (function (name) {
return `Hello, ${name}`;
})('Sorax');
Еще примеры
'use strict';
(function () {
const TAG = 'div';
const element = document.createElement(TAG);
element.textContent = 'Мой первый тег';
document.body.appendChild(element);
})();
let a = 1;
var b = 2;
const result = (function () {
let a = 3;
console.log(a, b); // 3 2
return a;
})();
console.log(a, b, result); // 1 2 3
(function () {
console.log('Something');
})();
// or
(() => console.log('Something!'))();
// with params
(function (text) {
console.log(text);
})('Something');
// param of another function
setTimeout(function () {
console.log('Test');
}, 1000);
setTimeout(() => {
console.log('Test');
}, 2000);
Замыкания (closures)
- Это своего рода взаимодействие параметров родительской функции с параметрами своей возвращаемой вложенной функции.
- Так как вложенная функция "видит" все параметры своей родительской функции, то эта вложенная функция может с ними взаимодействовать и сочетать со совеими собственными параметрами.
- Это происходит из-за цепочек областей видимости
function someParentFunc(a) {
return function someChildrenFunc(b) {
// a - род. параметр, b - локальный
return console.log(a + b);
};
}
// ЗАПИСЬ 1
// и таких цепочек ()() может быть сколько угодно
someParentFunc(1)(2); // 3
// ЗАПИСЬ 2
// сначала сохраняем в переменную вызов род. фукции с параметром 1
const a = someParentFunc(1);
// потом вызываем вложенную функцию с параметром 2
a(2); // 3
И этот сохраненный вызов можно так же вызывать с разными параметрами.
a(3); // 4
a(14); // 15
- Замыкания дают определенную гибкость, можно комбинировать вызовы с различными параметрами, хотя можно сделать все и через простую функцию с двумя параметрами
- Гибкость заключается в том, что можно сохранить вызов родительской функции с определенным параметром, а далее вызывать через сохранение вложеннную функцию с различными параметрами.
- Можно использовать при случаях, когда один параметр в обычной функции редко изменяется, а другой часто
// меньше гибкости
function(a, b) { ... }
// VS
// больше гибкости
function(a) {
return function(b) { ... }
}